CSS 对齐

  • 中心对齐元素

    要将块元素(如<div>)水平居中,请使用margin:auto;设置元素的宽度将阻止它伸展到其容器的边缘。然后元素将占用指定的宽度,剩余的空间将在两个边距之间平均分配:

    .center {
              margin: auto;
              width: 60%;
              border: 3px solid #73AD21;
              padding: 10px;
            }
    尝试一下

    注意:如果width属性未设置(或设置为100%),则中心对齐无效。

  • 居中对齐文字

    要将文本居中放置在元素中,请使用text-align:center;

    .center {
              text-align: center;
              border: 3px solid green;
            }
    尝试一下
  • 图像居中

    要使图像居中,请将左右边距设置为auto并使其成为block元素:

    img {
              display: block;
              margin-left: auto;
              margin-right: auto;
            }
    尝试一下
  • 左右对齐 - 使用position

    对齐元素的一种方法是使用position:absolute;

    .right {
              position: absolute;
              right: 0px;
              width: 300px;
              border: 3px solid #73AD21;
              padding: 10px;
            }
    尝试一下
  • 左右对齐 - 使用float

    对齐元素的另一种方法是使用float属性:

    .right {
              float: right;
              width: 300px;
              border: 3px solid #73AD21;
              padding: 10px;
            }
    尝试一下
    注意:如果元素高于包含它的元素,并且它被浮动,它将溢出其容器外部。您可以使用“clearfix”hack来解决此问题(请参阅下面的示例)。
  • 清除Hack

    然后我们可以添加overflow:auto;到包含元素来解决这个问题:

    div {
              border: 3px solid #4CAF50;
              padding: 5px;
            }
    
            .img1 {
              float: right;
            }
    
            .clearfix {
              overflow: auto;
            }
    
            .img2 {
              float: right;
            }
    尝试一下
  • 垂直居中 - 使用padding

    有很多方法可以在CSS中垂直居中元素。一个简单的解决方案是顶部和底部使用padding

    .center {
              padding: 70px 0;
              border: 3px solid green;
            }
    尝试一下

    要垂直和水平居中,请使用paddingtext-align:center

    .center {
              padding: 70px 0;
              border: 3px solid green;
              text-align: center;
            }
    尝试一下
  • 垂直居中 - 使用line-height

    另一个技巧是使用line-height具有等于​​该height属性的值的属性。

    .center {
              padding: 70px 0;
              border: 3px solid green;
            }
    尝试一下
  • 垂直居中 - 使用position和transform

    如果paddingline-height不是选项,第三种解决方案是使用positiontransform属性:

    .center {
              padding: 70px 0;
              border: 3px solid green;
            }
    尝试一下