How to align text in CSS vertically with this header bar

Question

This

I have this header, and I want to center the text vertically, but to keep it aligned on the right, this is my current code:

<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

You shouldn't need to do any tricky padding or margin stuff. Simply:

.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>

See this fiddle

Answer 2

You mean the result like this?

 <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>