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

Question

我有一个带有图像和一段文字的 ul：

<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

Use This CSS this will work 听到是一个例子

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

Answer 3

这是一个有效的小提琴 （将对齐值更改为：顶部 | 底部 | 中间到您需要的用途）

只需将其添加到您的CSS

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

Answer 4

只需line-height用于您的文本。

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