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. React的contextType的使用方法简介

    上一篇介绍了Context的使用方法.但是Context会让组件变得不纯粹,因为依赖了全局变量.所以这决定了Context一般不会大规模的使用.所以一般在一个组件中使用一个Context就好. 由于C ...

  2. Django中的HttpRequsest 和Httpresponse对象

    HttpRequest对象:每一个用户请求在到达视图函数的同时,django会自动创建一个HttpRequest对象并把这个对象当做第一个参数传给要调用的views方法,HttpRequest对象里封 ...

  3. php开发面试题---攻击网站的常用手段有哪些，及如何预防（整理）

    php开发面试题---攻击网站的常用手段有哪些,及如何预防(整理) 一.总结 一句话总结: 比较记忆:注意比较各种攻击的区别,比如csrf和xss,以及xss和sql,这样才能记住 1.Sql注入是什 ...

  4. HP Server BIOS实验报告

    原文链接http://www.hpiss.com/3924.html 注意:红色字体为HP手册中查找到的资源,及个人感觉应该注意的一些信息,个人翻译的也为红字体,网络中自行查找到的资源,以及询问各位师 ...

  5. UCML 原生Android中嵌入Cordova Webview

    Android实现在当前进程打开网页可以将Cordova中的WebView嵌入Android项目中,实现简单,不需要自己实现,所以掌握如何嵌入WebView对项目快速开发很有帮助 官方也有这方面的教程 ...

  6. webstorm 分屏

  7. 运维 03 Linux之文档与目录结构

    Linux之文档与目录结构   Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到 ...

  8. upc组队赛2 Super-palindrome【暴力枚举】

    Super-palindrome 题目描述 You are given a string that is consisted of lowercase English alphabet. You ar ...

  9. mac、windows系统charles安装破解

    一.下载 官网下载适合自己电脑的最新版本 下载地址:https://www.charlesproxy.com/latest-release/download.do 二.破解 破解地址:https:// ...

  10. 安全服务——CVE中CVSS相关指标介绍

    目录 CVSS相关指标 一.CVSS是什么 二.指标内容 1.Base指标 2.Temporal指标 3.Environmental指标 三.Base, Temporal, Environmental ...