在水平ul中对齐图像和文本li

Question

我有一张图片和一段文字：

<ul id="botoes">
    <li><a href="/o-meu-perfil"><img src="image.png"></a></li>
    <li><a href="#">Perguntas</a></li>
</ul>   

我试图让两个项目水平对齐，因为它是一个水平列表。因此我正在使用：

#botoes li{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    vertical-align: top;
}

Answer 1

这将解决问题

#botoes li{
    display: inline-block;
    list-style-type: none;
    padding-right: 20px;
    vertical-align: middle;
}

Answer 2

使用此CSS可以使用听到 example

#botoes li{
    display: inline-block; /* changed */ 
    list-style-type: none;
    padding-right: 20px;
    vertical-align: middle;  /* changed */ 
}

Answer 3

只需使用line-height作为您的文字。

Answer 4

这是working Fiddle （将对齐值更改为： top | bottom | middle 到您需要的用途）

只需将其添加到 css

即可

#botoes a
{
    display: inline;
    vertical-align: top;
}

Answer 5

刚刚放

style="display:inline-block;"

标签a或标签p

中的

例如

<ul>
            <li>
<img height="69" width="94" src="images/guest.png"/>
<a href="#" style="display:inline-block;">
<h4>KM Plan 2016</h4>
</a>
            </li>
</ul>

尝试使用JSFilddle