小图标和文字对齐的小技巧(第二种方法可能很少人知道)

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

  

  可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现。这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用。

  以前遇到这种场景,其实挺头疼的,我是直接给小图标设置相对定位,然后调整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>
        <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>

  问题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>

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

  给这个块元素设置一个固定宽度,然后加上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>

 

猜你喜欢

转载自www.cnblogs.com/tu-0718/p/9350471.html