I can not align the text in the center relative to the height of the picture. Tried vertical-align:middle; but most likely, I did something wrong.

 header>nav>ul { padding-top: 2.5%; } header>nav>ul>li { font-size: 1.25em; color: #6c6c6c; font-family: 'PT Sans', sans-serif; font-size: 20px; font-weight: 400; display: block; align-items: center; float: right; } header>nav>ul>li:first-child { } 
 <header> <nav> <ul> <li><img src="http://blogs.slj.com/connect-the-pop/files/2013/05/Theatrics-logo-small.png" alt=""></li> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> </header>

    3 answers 3

     ul { display: flex; list-style: none; align-items: center; flex-direction: row-reverse; padding: 0; font-size: 1.25em; color: #6c6c6c; font-family: 'PT Sans', sans-serif; font-size: 20px; font-weight: 400; } li { flex-grow: 1; } 
     <header> <nav> <ul> <li><img src="http://blogs.slj.com/connect-the-pop/files/2013/05/Theatrics-logo-small.png" alt=""></li> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> </header> 

       ul { text-align: justify; direction: rtl; padding: 0; font-size: 1.25em; color: #6c6c6c; font-family: 'PT Sans', sans-serif; font-size: 20px; font-weight: 400; } li { display: inline-block; vertical-align: middle; direction: ltr; } ul:after { content: ""; display: inline-block; width: 100%; } 
       <header> <nav> <ul> <li><img src="http://blogs.slj.com/connect-the-pop/files/2013/05/Theatrics-logo-small.png" alt=""></li> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> </header>

        I highly recommend using flexbox for various alignments. With him, life becomes beautiful!

         header>nav>ul { padding-top: 2.5%; display:flex; justify-content: center; align-items: center; } header>nav>ul>li { font-size: 1.25em; color: #6c6c6c; font-family: 'PT Sans', sans-serif; font-size: 20px; font-weight: 400; display: block; }
        • Something is unlikely ... Well this should hang on the container? - Qwertiy ♦