一、元素居中对齐 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. Latex基本用法

    空格 需要使用 \qquad,\quad,\,应该是占位符和变量之间需要有{}相隔. $$ C_{1} \qquad {C_2} $$ $$ C_{1} \quad {C_2} $$ $$ C_{1} ...

  2. Node.js v7.4.0 Documentation Addons

    https://nodejs.org/docs/latest/api/addons.html Node.js Addons are dynamically-linked shared objects, ...

  3. Mybatlis SQL 注入与防范

    SQL注射原理 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意)的SQL命令 ...

  4. python基础之Day5

    一.基本概念 为什么要有数据: 计算机能够像人一样识别现实生活中的状态是因为计算机事先将数据存到了记忆中 为什么要分类型: 满足现实世界不同状态的需要 二.数据类型(研究定义,作用,常见操作) 1.整 ...

  5. [Python] 代码中有中文注释会报错

    原因 如果文件里有非ASCII字符,需要在第一行或第二行指定编码声明. 解决方法 在第一行或是第二行加入这么一句# -- coding: utf-8 -- ASCII知识普及: ASCII(Ameri ...

  6. 我的MVP呢？

    Ladies and gentelmen, welcome the MVP of NBA 16-2017 Season:... 呃,等下,好像哪里不对.那是因为,我要说的MVP根本就不是Most Va ...

  7. java mail 读取邮件列表，

    // 准备连接服务器的会话信息 Properties props = new Properties(); props.setProperty("mail.store.protocol&quo ...

  8. python console 设立快捷键 学习源码 用到英语

    arbitrary---随意 iterable----迭代 invalid syntax   -----无效的语法 subscriptable   ----可索引访问的

  9. 682. Baseball Game

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...

  10. 2018.11.01 bzoj4872: [Shoi2017]分手是祝愿（期望dp）

    传送门 一道不错的题. 考虑n==kn==kn==k的时候怎么做. 显然应该从nnn到111如果灯是开着的就把它关掉这样是最优的. 不然如果乱关的话会互相影响肯定不如这种优. 于是就可以定义状态f[i ...