码迷,mamicode.com
首页 > Web开发 > 详细

css解决vertical-Align:middle不起作用的问题

时间:2020-07-20 10:46:12      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:解决   oct   span   作用   ica   img   body   set   middle   

当我们给一个元素(display为inline-block)的vertical-align设置为middle,我们会发现这个元素并没有垂直对齐。并且发现这个元素的高度的中心点,会在所有兄弟元素中高度最高的元素的底部靠上一点。

如下所示

技术图片

 

解决方法:

给当前和它的兄弟元素都添加vertical-align设置为middle

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img{
                width: 60px;
                height: 60px;
            }
            .author-image,
            .author-info{
                display: inline-block;
            }
            .author-email,
            .author-name{
                display: block;
            }
            .author-image,.author-info{
                vertical-align:middle;
            }
        </style>
    </head>
    <body>
        <p class="author-meta">
            <img class="author-image" src="img/cat.jpg" >
            <span class="author-info">
                <span class="author-name">sfhufhaisfhiais</span>
                <a href="" class="author-email">sfasfasfa</a>
            </span>
        </p>
    </body>
</html>

最终效果如下:

技术图片

css解决vertical-Align:middle不起作用的问题

标签:解决   oct   span   作用   ica   img   body   set   middle   

原文地址:https://www.cnblogs.com/MySweetheart/p/13343111.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!