如何在css中垂直对齐li内的文本

Question

我有一个<li>标记，其中包含img和文字，我希望将此li的内容垂直居中。这样做的最佳方式是什么？

<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));
}

Answer 1

您可以在图片标记上添加style="vertical-align: middle;"，使其与文字垂直居中。