如何使用此 header 条垂直对齐 CSS 中的文本

Question

这个

我有这个 header，我想将文本垂直居中，但要保持它在右侧对齐，这是我当前的代码：

<style>
      .top-menu {
        font-family: "Ubuntu";
        color: white;
        font-size: 16px;
        text-align: right;
        vertical-align: middle;
        line-height: 30px;
        /* padding: 0px 0px 20px 0px;*/
        margin-right: 10px; 
      }
      .background-gray {
        background-color: gray;
        padding: 2px 0px 0px 0px;
        margin: -8px -8px 0px -8px;
      }
    </style>

<div class="background-gray">
    <h4 class="top-menu">O nama Kontakt Lokacija</h4>
    </div>

Answer 1

你不应该需要做任何棘手的padding或margin东西。 简单地：

.top-menu {
    font-family: "Ubuntu";
    color: white;
    font-size: 16px;
    text-align: right;
    line-height: 30px;
    padding-right: 8px;
}
.background-gray {
    background-color: gray;
}

<div class="background-gray">
    <h4 class="top-menu">O nama Kontakt Lokacija</h4>
</div>

看到这个小提琴

Answer 2

你的意思是这样的结果？

 <style>.top-menu { font-family: "Ubuntu"; color: white; font-size: 16px; text-align: right; vertical-align: middle; line-height: 30px; /* padding: 0px 0px 20px 0px;*/ margin-right: 10px; }.background-gray { display: flex; background-color: gray; padding: 2px 0px 0px 0px; margin: -8px -8px 0px -8px; } </style>

 <div class="background-gray"> <h4 class="top-menu">O nama Kontakt Lokacija</h4> </div>