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. 《ArcGIS Runtime SDK for .NET开发笔记》--三维功能

    介绍 在ArcGIS Runtim SDK for .NET 10.2.6中,新添加了三维地图功能.在ArcGIS中,我们将三维地图称为Scene(场景),所以在Runtime SDK SDK for ...

  2. php开发面试题---jquery和vue对比（整理）

    php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...

  3. c 语言 volatile 关键字

    一.前言 1.编译器优化介绍: 由于内存访问速度远不及CPU处理速度,为提高机器整体性能,在硬件上引入硬件高速缓存Cache,加速对内存的访问.另外在现代CPU中指令的执行并不一定严格按照顺序执行,没 ...

  4. Ubuntu16.04搜狗拼音输入法候选栏无法显示中文（英文乱码）

    输入中文时,若候选栏显示英文乱码.无法显示中文,如下图所示,可按如下方式处理: cd ~/.config rm -rf SogouPY* sogou* 然后注销重新登录即可.

  5. vue事件修饰符(once:prev:stop)

    vue事件修饰符(once:prev:stop) stop修饰符  效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...

  6. python配置文件configparser详解

    Python中一般需要配置文件,配置文件一般以.cfg, .conf, .ini结尾.配置文件可以将数据库抽离到以 .ini(Windows)结尾的文件中,这样做的优点在于可在配置文件中添加多个数据库 ...

  7. Error in execution; nested exception is io.lettuce.core.RedisCommandExecutionException: ERR invalid longitude,latitude pair 111.110000,111.230000

    io.lettuce.core.RedisCommandExecutionException: ERR invalid longitude,latitude pair 111.110000,111.2 ...

  8. nuxt项目在windows环境下安装部署

    1.nodejs安装,地址 https://nodejs.org/en/ 2.在本地项目中运行npm  run build  命令将开发好的项目打包生成.nuxt文件夹,然后把.nuxt文件夹.nux ...

  9. 微信小程序のwxss选择器

    一.什么是选择器 选择器就是选择标签所用样式的模式,即:以什么方式设置样式. 二.微信小程序的样式选择器 .calss就是选择器的一种 三.选择器的优先级 element表示样式元素:.element ...

  10. 2016计蒜之道复赛 百度地图的实时路况 分治+Floyd

    题目链接:https://nanti.jisuanke.com/t/A1108 这道题还挺有意思的.让我对Floyd的了解又加深了一点. 首先我们重新审视Floyd这三重循环到底有什么用?第一层是枚举 ...