一、元素居中对齐 margin:auto

  水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐,用margin:auto,而且,需要设置 width 属性(或者设置 100%),否则,居中对齐将不起作用。

二、文本居中对齐 text-align:center

  文本在所在元素内水平居中对齐,可以使用 text-align: center;

三、图片居中对齐 margin:auto

  而且放在块元素中

 四、左右对齐-使用定位方式

  position: absolute; 属性来对齐元素,绝对定位会把元素从正常流中删除(不再占住位置),而且可以和其他元素交叠。

  没有使用绝对定位时候:

<!DOCTYPE html>
<html>
<head>
<style>
.right { right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body> <h2>右对齐</h2>
<p>以下实例演示了如何使用 position 来实现右对齐:</p> <div class="right">
<p>菜鸟教程 -- 学的不仅是技术,更是梦想!!</p>
</div>
<div style="background-color:red;height:100px"></div> </body>
</html>

  运行结果:

  绝对定位:

五、左右对齐 - 使用 float 方式

六、垂直居中对齐 padding

七、水平和垂直居中对齐 padding + text-align:center

八、水平和垂直居中对齐-line-height + text-align:center

  行高和高要相等

CSS 基础 例子 水平 & 垂直对齐的更多相关文章

  1. CSS 布局 - 水平 & 垂直对齐

    CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...

  2. CSS:CSS 布局 - 水平 & 垂直对齐

    ylbtech-CSS:CSS 布局 - 水平 & 垂直对齐 1.返回顶部 1. CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个 ...

  3. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  4. CSS中关于vertical-align垂直对齐

    一向以来,我对vertical-align的属性都搞的不是太清楚,今天刚好碰到有朋友问我相关的问题,于是自己潜心研究了一番,发现这玩意还真不是个简单的东西,在此我分享的东西都是抛弃脑残的IE的,如果你 ...

  5. CSS 布局水平 & 垂直对齐

    元素居中对齐 margin: auto; 文本居中对齐 text-align: center; 图片居中对齐 要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中 左右对齐 ...

  6. CSS 基础 例子 display属性:block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  7. CSS 基础 例子 行高line-height

    “行高“指一行文字的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元素时,它定 ...

  8. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  9. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

随机推荐

  1. Eclipse快速生成覆盖方法、Getter、Setter的方法

    点击鼠标右键 --> Source --> 直接使用快捷键 Alt+Shift+s

  2. pc-H5 适配方案

    一.介绍 在前端项目页面开发中,尤其是H5页面开发,我们常常要适配各种分辨率的屏幕,才能让用户获得最好的体验效果.pc也是如此,很多页面是一屏,也是要适配各种尺寸的分辨率.这时候我们就需要对各种分辨率 ...

  3. PLSQL数组

    declare type t_varchar_arr is TABLE OF varchar2(60); type t_number_arr is TABLE OF number; v_date t_ ...

  4. Linux学习笔记:Jenkins的使用

    在windows中使用Jenkins(Linux系统下类似),步骤是: 1 从官网下载jenkins项目的war包 2 将jenkins.war放到tomcat的webapps目录中,启动tomcat ...

  5. 【Game】2048小游戏

    每个男孩都有一个游戏梦吧,本例简单讲述一款很火的游戏<2048>的制作. 本例参考地址:https://www.imooc.com/learn/76 游戏准备 1.游戏的逻辑(2048大家 ...

  6. 关于syslog日志功能详解 事件日志分析、EventLog Analyzer

    关于syslog日志功能详解 事件日志分析.EventLog Analyzer 一.日志管理 保障网络安全 Windows系统日志分析 Syslog日志分析 应用程序日志分析 Windows终端服务器 ...

  7. MySQL Server参数优化 - innodb_file_per_table(独立表空间)

    1 简介    Innodb存储引擎可将所有数据存放于ibdata*的共享表空间,也可将每张表存放于独立的.ibd文件的独立表空间.    共享表空间以及独立表空间都是针对数据的存储方式而言的.    ...

  8. Python之tornado

    一.快速了解Tornado框架 1)tornado简介 Tornado 和现在的主流 Web 服务器框架(包括大多数 Python 的框架)有着明显的区别:它是非阻塞式服务器,而且速度相当快.得利于其 ...

  9. Linux运维之Ansible自动化运维管理工具

    Ansible简介:Ansible是一个简单高效的自动化运维管理工具,用Python开发,能大批量管理N多台机器,可以并发的在多台机器上部署应用.安装软件.执行命令.配置和编排任务.后面会提到批量安装 ...

  10. day08作业---函数

    '''2.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者.'''#学会了 原来 range(len(iter)) 是 从零到len-1 的数的组合 建新放在 ...