Question

我有一个问题，我无法垂直对齐我的文字，我尝试搜索，但我找不到解决问题的方法。

我正在尝试创建一个导航，您可以将其悬停在其上，然后通过过渡扩展导航高度，但此Div中的文本将无法垂直居中。

这是我的css

.nav-links-typo {
    font-size: 17px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}
.nav-bar {
    position: fixed;
    height: 3%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    background-color: coral;
    transition: 1.2s;
}
.nav-bar:hover {
    height: 5%;
    transition: 1.2s;
}
.nav-links-block {
    min-height: 100%;
    width: 10%;
    margin-left: 5%;
    background-color: lightgray;
    display: inline-table;
    text-align: center;
}

这是我的HTML

<div class="nav-bar">

    <div class="nav-links-block-platzhalter"></div>

    <div class="nav-links-block">

        <a class="nav-links-typo">Startseite</a>

    </div>

    <div class="nav-links-block">

        <a class="nav-links-typo">Rest API Console</a>

    </div>

    <div class="nav-links-block">

        <a class="nav-links-typo">Grafana</a>

    </div>



</div>

Answer 1

自己想出来：而不是设置高度我将在顶部和底部添加填充。

.nav-bar:hover {
    padding-top: 1%;
    padding-bottom: 1%;
    transition: 1.2s;
}

垂直居中一段

1 个答案: