How to align vertically text inside li in css -
i have <li> tag contains img , text, , want align contents of li centered vertically. best way this?
<ul id='menu'> <li> <img src='image/logout.png' width='40px' height='40px'> <a href='index3.php?page=logout'>logout</a> </li> </ul> ul#menu li { border: 2px solid #000; border-right: 0; border-left: 0; padding: 15px; height: 50px; line-height: 50px; -webkit-border-radius: 0 30px 0 30px; -moz-border-radius: 0 30px 0 30px; border-radius: 0 30px 0 30px; /*shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); } 
you can add style="vertical-align: middle;" on image tag vertically center text.
Comments
Post a Comment