ylbtech-CSS：CSS 布局 - 水平 & 垂直对齐
1.返回顶部
1、

CSS 布局 - 水平 & 垂直对齐

水平 & 垂直居中对齐

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

div 元素是居中的

实例

.center {

    margin: auto;

    width: 50%;

    border: 3px solid green;

    padding: 10px;

}

尝试一下 »

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

文本居中对齐

实例

.center {

    text-align: center;

    border: 3px solid green;

}

尝试一下 »

提示: 更多文本对齐实例，请参阅 CSS 文本 章节。

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:

实例

img {

    display: block;

    margin: auto;

    width: 40%;

}

尝试一下 »

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

菜鸟教程 -- 学的不仅是技术，更是梦想！！！

实例

.right {

    position: absolute;

    right: 0px;

    width: 300px;

    border: 3px solid #73AD21;

    padding: 10px;

}

尝试一下 »

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

实例

body {

    margin:;

    padding:;

}

.container {

    position: relative;

    width: 100%;

}

.right {

    position: absolute;

    right: 0px;

    width: 300px;

    background-color: #b0e0e6;

}

尝试一下 »

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

实例

.right {

    float: right;

    width: 300px;

    border: 3px solid #73AD21;

    padding: 10px;

}

尝试一下 »

当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

实例

body {

    margin:;

    padding:;

}

.right {

    float: right;

    width: 300px;

    background-color: #b0e0e6;

}

尝试一下 »

垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:

我是垂直居中。

实例

.center {

    padding: 70px 0;

    border: 3px solid green;

}

尝试一下 »

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

我是水平和垂直都居中的。

实例

.center {

    padding: 70px 0;

    border: 3px solid green;

    text-align: center;

}

尝试一下 »

垂直居中 - 使用 line-height

我是垂直居中的。

实例

.center {

    line-height: 200px;

    height: 200px;

    border: 3px solid green;

    text-align: center;

}

/* 如果文本有多行，添加以下代码: */

.center p {

    line-height: 1.5;

    display: inline-block;

    vertical-align: middle;

}

尝试一下 »

垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

实例

.center {

    height: 200px;

    position: relative;

    border: 3px solid green;

}

.center p {

    margin:;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

尝试一下 »

提示: 更多 transform 属性内容可以参阅 2D 翻转章节。

更多实例

CSS 使用 margin 让 div 居中对齐

CSS 使用绝对定位 让 div 右对齐

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

CSS：CSS 布局 - 水平 & 垂直对齐的更多相关文章

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

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

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

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

  3. CSS 基础 例子 水平 & 垂直对齐

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

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

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

  5. css 实现文字图片垂直对齐

    给图片使用vertical-align:middle;就可以实现 <!DOCTYPE html> <html lang="en"> <head> ...

  6. CSS实现水平垂直同时居中的5种思路

    × 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...

  7. CSS实现水平垂直同时居中的6种思路

    前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...

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

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

  9. 【css基础】文本对齐，水平对齐，垂直对齐

    先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注 ...

随机推荐

  1. AcWing 227. 小部件厂 （高斯消元）打卡

    题目:https://www.acwing.com/problem/content/description/229/ 题意:有很多个零件,每个零件的生产时间都在3-9天之间,现在只知道每个工人的生产部 ...

  2. [CSP-S模拟测试ex]题解

    爆零了.少特判见祖宗.还好这场不计入总分. 考场上什么都没想.感觉考试状态又回到了两个月前. A.Antipalindrome 手玩样例,不难发现题目中要求的合法串的充要条件是:对于任意$i \in ...

  3. QC10迁移到ALM11

    转自原作者 http://blog.csdn.net/yhqun/article/details/6981250 服务器A:QC9或QC10服务器B:QC9或QC10 DB Server服务器C:AL ...

  4. shell从字符串中提取子串（正则表达式）

    通过试验,可以通过grep.sed两种方式实现. 假设需要提取libgcc-4.8.5-4.h5.x86_64.rpm中的版本号. grep echo "libgcc-4.8.5-4.h5. ...

  5. jmeter3.0启动时报错误 “unable to access jarfile apachejmeter.jar“

    jdk环境也配置好了.但启动时报错.才发现jmeter3.0的bin目录下没有这个.jar文件.复制了一份放到这个目录下就不报这个错了.

  6. sublime useful packages

    Package control Prefixr Emmet

  7. 判断数组中值为empty

    const n = this.item.answerSelfId.length; let num = 0; for (let m = 0 ; m < n ; m++) { if ( !this. ...

  8. maven命名

    <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpcl ...

  9. Python之Tab键自动补全

    首先备份一下Tab键自动补全代码: # python start file import sys import readline import rlcompleter import atexit im ...

  10. mac vscode 实用快捷键

    cmd+del:光标左边删到头 cmd+fn+del:光标右侧删到头