文章: 阅读:

CSS Align 对齐

CSSCSS

前言

  • 水平 & 垂直对齐。
属性 描述 CSS 备注 🔗
margin 简写属性。在一个声明中设置所有外边距属性 1 🔗
text-align 元素中的文本对齐方式 1 🔗
position 指定元素的定位类型 2 🔗
float 指定一个盒子（元素）是否可以浮动 1 🔗
padding 简写属性。设置在一个声明中的所有填充属性 1 🔗
line-height 设置行高 1 🔗
transform 应用于元素的 2D 或 3D 转换。允许将元素旋转，缩放，移动，倾斜等 3 🔗

1、水平居中对齐

1.1 元素居中对齐

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

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

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

属性 描述 CSS 备注 🔗
margin 简写属性。在一个声明中设置所有外边距属性 1 🔗
  • 属性值
值 描述
auto 浏览器计算外边距
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的外边距
inherit 规定应该从父元素继承外边距

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        .center {
            margin: auto;
            width: 60%;
            
            padding: 10px;
            border: 3px solid #73AD21;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>元素居中对齐</h2>
    <p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>

    <div class="center">
        <p>元素居中对齐。</p>
    </div>

  • 效果

1.2 文本居中对齐

  • 如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;。
属性 描述 CSS 备注 🔗
text-align 元素中的文本对齐方式 1 🔗
  • 属性值
值 描述
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
inherit 规定应该从父元素继承 text-align 属性的值

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
        .center {
            text-align: center;
            border: 3px solid green;
        }
    </style>
    1
    2
    3
    <div class="center">
        <p>文本居中对齐。</p>
    </div>

  • 效果

1.3 图片居中对齐

  • 要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
属性 描述 CSS 备注 🔗
margin 简写属性。在一个声明中设置所有外边距属性 1 🔗
  • 属性值
值 描述
auto 浏览器计算外边距
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的外边距
inherit 规定应该从父元素继承外边距

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
        img {
            display: block;
            margin: 0 auto;
        }
    </style>
    1
    2
    3
    4
    <h2>图片居中对齐</h2>
    <p>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中：</p>

    <img src="https://demo.qianchia.com/media/image/demo/demo1.png" width=30%>

  • 效果

2、左右对齐

2.1 使用 position 方式

  • 可以使用 position: absolute; 属性来对齐元素。
属性 描述 CSS 备注 🔗
position 指定元素的定位类型 2 🔗
  • 属性值
值 描述
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，”left: 20;” 会向元素的 LEFT 位置添加 20 像素
sticky 粘性定位，该定位基于用户滚动的位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix
inherit 规定应该从父元素继承 position 属性的值
initial 设置 CSS 属性为它的默认值

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        .right {
            position: absolute;
            right: 0px;
            
            padding: 10px;
            border: 3px solid #73AD21;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>右对齐</h2>
    <p>以下实例演示了如何使用 position 来实现右对齐:</p>

    <div class="right">
        <p>元素居右对齐</p>
    </div>

  • 效果

2.1.1 浏览器兼容

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

  • 当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。

  • 注意: 当使用浮动属性对齐，总是包括 !DOCTYPE 声明！如果丢失，它将会在 IE 浏览器产生奇怪的结果。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            position: relative;
            width: 100%;
        }
        
        .right {
            position: absolute;
            right: 0px;

            padding: 10px;
            border: 3px solid #73AD21;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    <h2>右对齐</h2>
    <p>以下实例演示了如何使用 position 来实现右对齐:</p>

    <div class="container">
        <div class="right">
            <p>元素居右对齐。</p>
        </div>
    </div>

  • 效果

2.2 使用 float 方式

  • 也可以使用 float 属性来对齐元素。
属性 描述 CSS 备注 🔗
float 指定一个盒子（元素）是否可以浮动 1 🔗
  • 属性值
值 描述
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit 规定应该从父元素继承 float 属性的值

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        .right {
            float: right;
            
            padding: 10px;
            border: 3px solid #73AD21;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>右对齐</h2>
    <p>以下实例演示了如何使用 float 来实现右对齐:</p>

    <div class="right">
        <p>元素居右对齐。</p>
    </div>

  • 效果

2.2.1 子元素溢出

  • 注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix（清除浮动)）” 来解决该问题。

  • 我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        div {
            padding: 5px;
            border: 3px solid #4CAF50;
        }
        img {
            float: right;
        }

        .clearfix {
            overflow: auto;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <p>以下实例图在父元素中溢出，很不美观:</p>

    <div>
        <img src="https://demo.qianchia.com/media/image/demo/demo5.png" alt="Pineapple" width="170" height="170">
        元素居右对齐。
    </div>

    <p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>

    <div class="clearfix">
        <img src="https://demo.qianchia.com/media/image/demo/demo5.png" alt="Pineapple" width="170" height="170">
        元素居右对齐。
    </div>

  • 效果

2.2.2 浏览器兼容

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

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

  • 注意：当使用浮动属性对齐，总是包括 !DOCTYPE 声明！如果丢失，它将会在 IE 浏览器产生奇怪的结果。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        .right {
            float: right;
            
            padding: 10px;
            border: 3px solid #73AD21;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>右对齐</h2>
    <p>以下实例演示了如何使用 float 来实现右对齐:</p>

    <div class="right">
        <p>元素居右对齐。</p>
    </div>

  • 效果

3、垂直居中对齐

3.1 使用 padding

  • CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding。
属性 描述 CSS 备注 🔗
padding 简写属性。设置在一个声明中的所有填充属性 1 🔗
  • 属性值
值 描述
length 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的填充
inherit 指定应该从父元素继承 padding

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

  • 设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：

    • 1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
    • 2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；

  • 多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .center {
            padding: 70px 0;

            border: 3px solid green;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>垂直居中</h2>
    <p>使用 padding 属性实现元素的垂直居中：</p>

    <div class="center">
        <p>元素垂直居中。</p>
    </div>

  • 效果

3.2 使用 line-height

  • 还可以使用 line-height 属性来设置垂直居中。
属性 描述 CSS 备注 🔗
line-height 设置行高 1 🔗
  • 属性值
值 描述
normal 默认。设置合理的行间距
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距
length 设置固定的行间距
% 基于当前字体尺寸的百分比行间距
inherit 规定应该从父元素继承 line-height 属性的值

  • 让 line-height 属性值和 height 属性值相等来设置 div 元素居中。

  • 设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：

    • 1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
    • 2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；

  • 多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        .center {
            line-height: 200px;
            height: 200px;
            
            border: 3px solid green;
        }
        .center p {
            line-height: 1.5;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>垂直居中</h2>
    <p>让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>

    <div class="center">
        <p>元素垂直居中。</p>
    </div>

  • 效果

3.3 使用 transform

  • 除了使用 padding 和 line-height 属性外，还可以使用 transform 属性来设置垂直居中。
属性 描述 CSS 备注 🔗
transform 应用于元素的 2D 或 3D 转换。允许将元素旋转，缩放，移动，倾斜等 3 🔗
  • 属性值
值 描述
none 定义不进行转换。
matrix(n, n, n, n, n, n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x, y) 定义 2D 转换。
translate3d(x, y, z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x, y, z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x, y, z, angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle, y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图

  • 注意: IE8 及更早版本不支持 transform 属性。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
        .center { 
            position: relative;
            height: 200px;

            border: 3px solid green; 
        }
        
        .center p {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>垂直居中</h2>
    <p>使用 positioning 和 transform 属性来设置水平和垂直居中：</p>

    <div class="center">
        <p>元素垂直居中。</p>
    </div>

  • 效果

4、CSS 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:27


评论


文章目录
  1. 1. 前言
  2. 2. 1、水平居中对齐
    1. 2.1. 1.1 元素居中对齐
    2. 2.2. 1.2 文本居中对齐
    3. 2.3. 1.3 图片居中对齐
  3. 3. 2、左右对齐
    1. 3.1. 2.1 使用 position 方式
      1. 3.1.1. 2.1.1 浏览器兼容
    2. 3.2. 2.2 使用 float 方式
      1. 3.2.1. 2.2.1 子元素溢出
      2. 3.2.2. 2.2.2 浏览器兼容
  4. 4. 3、垂直居中对齐
    1. 4.1. 3.1 使用 padding
    2. 4.2. 3.2 使用 line-height
    3. 4.3. 3.3 使用 transform
  5. 5. 4、CSS 实例
隐藏目录