时间戳

首页 > 解决方案 > 为什么这个导航栏中的矢量和文本不垂直对齐？

css - 为什么这个导航栏中的矢量和文本不垂直对齐？

问题描述

我正在开发 HTML 中的导航栏。我不明白为什么元素在导航栏中不能很好地排列。

body {
    background-color: #ECEFF1; /* Blue Gray 50 */
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

#header {
    background-color: #ba68c8; /* Purple 300 */
    color: #ffffff; /* White */
    height: 24px;
    padding: 8px;
}

.header-link {
    font-size: 24px;
    text-decoration: none;
}
<div id="header">

    <a class="header-logo" href="#">
        <img src="http://www.sigmacubes.com/img/logo_h.svg" height="24" />
    </a>

    <a class="header-link" href="#">
      Text
    </a>

</div>

尽管 svg 是垂直对齐的，但文本不会保持垂直对齐。为什么会这样？

标签： csshtml

解决方案

是vertical-align:middle;您的标题链接类的选项吗？如果进一步匹配您想要的外观，display: table-cell;可能会添加。vertical-align:middle;

推荐阅读