美文网首页视觉艺术
一篇文章带你了解CSS对齐方式

一篇文章带你了解CSS对齐方式

作者: Python进阶学习交流 | 来源:发表于2020-11-03 13:26 被阅读0次

    一、居中

    1. 居中对齐元素

    将块元素水平居中对齐(像 <div>) , 使用 margin: auto;

    设置元素的宽度将阻止它伸展到容器的边缘。

    然后元素将占用指定的宽度,剩下的空间将平分在两个边距之间:

    这个div是居中的。

    .center {
        margin: auto;
        width: 50%;
        border: 3px solid green;
        padding: 10px;
    }
    

    注意:如果没有设置宽度属性,则居中对齐没有效果 (或者设置到100%).


    2. 居中对齐文本

    将元素内部的文本居中, 使用text-align: center;

    这些文本是居中的。

    .center {
        text-align: center;
        border: 3px solid green;
    }
    

    3. 居中图片

    居中图片, 使用 margin: auto; 并且设置为块级元素:

    img {
        display: block;
        margin: auto;
        width: 40%;
    }
    

    二、左右

    HTML代码:

    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>编程字典</title>
    
    </head>
    <body>
    
      <h2>右对齐</h2>
      <p>如何正确定位元素与位置属性的一个例子:</p>
    
      <div class="right">
        <p>在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议.</p>
      </div>
    
    </body>
    </html>
    

    1. 左右对齐 - 使用 position

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

    在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议。

    .right {
        position: absolute;
        right: 0px;
        width: 300px;
        border: 3px solid #73AD21;
        padding: 10px;
    }
    

    注意:

    绝对定位元素从正常流中移除,并且可以重叠元素。

    当使用 position对齐元素时, 总是定义 marginpadding<body> 元素. 这是为了避免不同浏览器的视觉差异。

    还有IE8和早期版本有一些问题, 当使用 position. 如果容器元素有一个指定的宽度 (例如:<div class="container">) , 并且没有设置!DOCTYPE, IE8 和早期版本将添加 17px 外边距到右边. 这似乎是一条为滚动条预留空间. 因此,总是声明 !DOCTYPE 当使用 position时:

    body {
        margin: 0;
        padding: 0;
    }
    
    .container {
        position: relative;
        width: 100%;
    }
    
    .right {
        position: absolute;
        right: 0px;
        width: 300px;
        background-color: #b0e0e6;
    }
    

    2. 左右对齐 - 使用 float

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

    .right {
        float: right;
        width: 300px;
        border: 3px solid #73AD21;
        padding: 10px;
    }
    

    提示:

    当将元素使用浮动对齐时,总是为body元素定义边距和填充。这是为了避免不同浏览器的视觉差异。

    body {
        margin: 0;
        padding: 0;
    }
    
    .right {
        float: right;
        width: 300px;
        background-color: #b0e0e6;
    }
    

    效果图:

    三、垂直居中,水平居中

    HTML代码:

    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>编程字典</title>
    
    </head>
    <body>
    
      <h2>居中</h2>
      <p>在这个实例中,
         我们使用定位和transform属性实现元素的水平和垂直居中:</p>
    
      <div class="center">
        <!-- <p>我是垂直居中的.</p> -->
        <p>我水平垂直居中.</p>
        
      </div>
    
      <p>注意: transform属性不支持IE8和更早的版本.</p>
    
    </body>
    </html>
    

    1. 使用 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;
    }
    

    2. 使用 line-height

    另一个技巧是使用 line-height 属性值等于 height 属性值.

    .center {
        line-height: 200px;
        height: 200px;
        border: 3px solid green;
        text-align: center;
    }
    
    /* If the text has multiple lines, add the following: */
    .center p {
        line-height: 1.5;
        display: inline-block;
        vertical-align: middle;
    }
    

    3. 使用 position & transform

    如果paddingline-height不可选,第三种解决方案是使用定位和变换属性:

    .center {
        height: 200px;
        position: relative;
        border: 3px solid green;
    }
    
    .center p {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    

    四、总结

    本文基于Html基础,主要介绍了Html中对齐的方式,对于对齐中的标签做了详细的讲解,用丰富的案例 ,代码效果图的展示,帮助大家更好理解 。

    最后,希望可以帮助大家更好的学习CSS3。

    相关文章

      网友评论

        本文标题:一篇文章带你了解CSS对齐方式

        本文链接:https://www.haomeiwen.com/subject/chbbvktx.html