html - Not able vertical align -


hi trying align text 'mybrand' middle of box(highlighted in orange). not able achieve that. have tried using 'vertical-align: middle'. not working. missing here?

css

header, nav, form, a, ul, li, form, img, input {             padding: 0px;             margin: 0px;         }           header {             width: 980px;              background-color: #6c8dd5;             margin-right: auto;             margin-left: auto;             font-family: "helvetica neue", sentinal, sans-serif;             padding-top: 7px;             padding-bottom: 7px;         }          header nav {display: table;}         header nav ul {display: table-row;}          header nav ul li {display: table-cell;}           header nav ul img {             width: 25px;             height: 25px;         } 

html

<header role="banner">      <nav role="navigation">         <ul>             <li id="logo">                 <a href="home.html"><img src="brand.jpg" /></a>                 <a href="home.html">mybrand</a>              </li>          </ul>     </nav>  </header> 

output

enter image description here

demo

#logo {     display:inline-block;     vertical-align:middle; } 

Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -