Question

我正在使用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垂直对齐，但文本不会保持垂直对齐。为什么会这样？

Answer 1

您的标头链接类是否有vertical-align:middle;个选项？如果display: table-cell;与您想要的外观进一步匹配，则可以与vertical-align:middle;一起添加。

Answer 2

您可以做的是将标头链接字体大小减小到20px，并为其赋予绝对位置

.header-link {
    font-size: 20px;
    text-decoration: none;
    position: absolute;
}

或者，如果您希望将尺寸保持为24像素，则最好将其设置为顶部空白：-5像素

.header-link {
    font-size: 24px;
    text-decoration: none;
    position: absolute;
    margin-top: -5px;
}

为什么矢量和文本在此导航栏中不垂直对齐？

2 个答案: