在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐

  

  可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现。

  这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用。

  以前遇到这种场景,其实挺头疼的,我是直接给小图标设置相对定位,然后调整top值。好像找不到更好的办法,也就没去管了。

  直到后来偶然看了张鑫旭大神关于vertical-align属性的视频讲解,感觉发现了新大陆。

  

  下面总结了2种方法,只需要一句代码即可解决(强烈推荐第二种)

  ①:给小图标加上 vertical-align:middle;

   以前因为IE6,7对该属性不支持,所以还要使用csshack,

  现在主流浏览器都已经很好的支持了,而且谁还管万恶的低版本IE浏览器兼容喔(eat shift)

  

  ②:给小图标加上 vertical-align:-2px;(这里的负值根据你的情况自行设置,这种方法没有兼容性问题)

  注:如果当你遇到第一种方法用了没有效果或者用着很不开心的时候,强烈推荐使用第二种方法

 

  

  顺便总结了一些其它小技巧,害怕自己以后忘记,也希望帮到有需要的小伙伴

 

  问题1:怎么让定位元素垂直居中的三种方法?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div01 {
                width:200px;
                height:200px;
                background-color:#6699FF;
                position:absolute;
                margin: auto;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
            <div class="div01"></div>
    </body>
</html>

 注:top right bottom left设置为0 + margin设置为auto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div01 {
                width:300px;
                height:200px;
                background-color:#6699FF;
                position:absolute;
                top:50%;
                left:50%;
                margin-top: -100px;
                margin-left: -150px;
            }
        </style>
    </head>
    <body>
            <div class="div01"></div>
    </body>
</html>

注:top和left设置为50% + margin-left和margin-top为负值,分别设置值为元素宽高的一半

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定位元素居中</title>
        <script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
    .div{
        width: 500px;
        height: 300px;
        background-color: red;
        position: absolute;
        left: 50%;
        top:50%;
        margin: -150px 0px 0px -250px;
    }
    </style>
    <body>
            <div class="div"></div>
    </body>
</html>

注:同上

  注: 上面三种都是在知道具体宽高的情况下,如果不知道元素宽高怎么让其垂直居中呢?(利用transform属性

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

    <body>
        <img src="img/1.jpg" />
    </body>

</html>

 

  问题2:怎么让文字垂直居中?

  (给一个空标签,然后给空标签设置display:inline-block;height:100%;width:1px;vertical-align:middle;)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文字垂直居中</title>
        <style type="text/css">
            .test {
                width: 500px;
                padding: 10px;
                border: 1px solid red;
                text-align: center;
            }
            
            .test div {
                display: inline-block;
                padding: 3px;
                width: 200px;
                border: 1px solid #CCCCCC;
            }
            
            .test span {
                display: inline-block;
                height: 100%;
                width: 1px;
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <!--用一个高度100% 宽1px display: inline-block 的空标签 然后使用vertical-align: middle; 就可以在高度不固定的情况下 自动居中-->

        <div class="test">
            <div>
                青青园中葵,朝露待日晞。 阳春布德泽,万物生光辉。 常恐秋节至,焜黄华叶衰。 百川东到海,何时复西归? 少壮不努力,老大徒伤悲。青青园中葵,朝露待日晞。 阳春布德泽,万物生光辉。 常恐秋节至,焜黄华叶衰。 百川东到海,何时复西归? 少壮不努力,老大徒伤悲。
            </div>
            <span></span>
        </div>

    </body>

</html>

 注:上面方法稍微麻烦了点最简单粗暴的方法是把某元素height和line-height属性值设置为相同值

 

  问题3:怎么让一个块元素水平居中,块元素里的文字也水平居中?

  给这个块元素设置一个固定宽度,然后加上margin:0 auto; 在给里面的元素设置text-align:center;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .main {
                width: 400px;
                margin: 0 auto;
                background-color: chocolate;
            }
            .main p {
                color: #fff;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <p>珍爱生命,远离IE</p>            
        </div>
    </body>
</html>

   问题4:让一个绝对定位的元素水平居中应该怎么做呢?

   给absolute元素设置left为50%,margin-left设置负值,值为元素宽度的一半

  

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平对齐</title>
    <style type="text/css">
        .container {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        .item {
            background-color: #ccc;
        }

        .container-3 {
            position: relative;
            height: 100px;
        }
        .container-3 .item {
            width: 300px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="container container-3">
        <div class="item">
            this is absolute item
        </div>
    </div>
</body>
</html>

 

 

 

  

   补充:最简单的实现左边定宽,右边自适应布局(给左边设置固定宽度,然后加浮动;右边设置宽度百分百,不加浮动)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
                color: #fff;
                font-size: 30px;
                font-weight: bold;
                text-align: center;
                box-sizing: border-box;
            }
            
            aside {
                float: left;
                width: 200px;
                height: 200px;
                line-height: 200px;
                background: #5A6A94;
            }
            
            section {
                width: 100%;
                height: 200px;
                line-height: 200px;
                background: #BE4F4F;
            }
        </style>
    </head>

    <body>
        <!-- 左边定宽 -->
        <aside class="left">Left</aside>
        <!-- 右边自适应 -->
        <section class="right">Right</section>
    </body>

</html>