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. 极限IO优化

    namespace IO{ #define BUF_SIZE 100000 #define OUT_SIZE 100000 #define ll long long //fread->read ...

  2. 推荐两款远程管理Linux工具（基于Windows系统）

    推荐两款远程管理Linux工具(基于Windows系统) 1.Xshell 百度百科:Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows ...

  3. T1212：LETTERS

    [题目描述] 给出一个R * S的大写字母矩阵,一开始的位置为左上角,你可以向上下左右四个方向移动,并且不能移向曾经经过的字母.问最多可以经过几个字母.roe× [输入] 第一行,输入字母矩阵行数R和 ...

  4. 为什么重写equals还要重写hashcode

    参考回答: HashMap中,如果要比较key是否相等,要同时使用这两个函数!因为自定义的类的hashcode()方法继承于Object类,其hashcode码为默认的内存地址,这样即便有相同含义的两 ...

  5. 记录以下mysql5.7在win使用Navicat无法链接的问题

    1.前提 系统:win1o0 局域网服务器:ubuntu18.04 mysql版本:5.7 问题描述: 在ubuntu18.04下的shell 中使用mysql -uroot  -p  是可以登陆的, ...

  6. 慎用margin系列3---IE6下3px bug

    当我们想让一段文字出现在一个布局块的右边的时候,我们会让布局块向左浮动,然后把段落设置左布局块宽度大小的左空白.比如左布局块是.a{float:left;height: 110px;width: 28 ...

  7. jQuery选择器我犯的错误（原创）

    jQuery的选择器十分强大,但是在使用jQuery选择器的时候一定要十分小心,空格.冒号.引号到处都是坑,老手也不能避免,只能勤加练习,熟能生巧,掌握规律,为了练习,凡是到选择器的地方我都自己先敲, ...

  8. 转 关于HTTP和HTTPS的区别

    关于HTTP和HTTPS的区别 运维猿 2018-12-01 07:30:00 一 HTTP和HTTPS的基本概念 1.HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答 ...

  9. Linux常用信号快捷键的使用

    ctrl-c 发送 SIGINT 信号给前台进程组中的所有进程.常用于终止正在运行的程序.ctrl-z 发送 SIGTSTP 信号给前台进程组中的所有进程,常用于挂起一个进程.ctrl-d 不是发送信 ...

  10. JSP版本的数据库操作

    代码时间:2015-6-16 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...