zoukankan html css js c++ java

css解决vertical-Align：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>

最终效果如下：

查看全文

相关阅读:
关于vue的npm run dev和npm run build
移动端meta行大全
 浅谈前端三大框架Angular、react、vue
Web Workers
Meta（其他信息）
页面
 页面
 日期和时间
 ECharts教程（未完）
页面

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