我正在为我的网站使用Bootstrap 2.0.1框架。
我要显示图标图像，并且要在图标图像的右侧显示文本。两者均应为内联并垂直居中对齐。我设法使图标图像垂直居中对齐，但无法在该图标图像的右侧显示文本。现在，文本显示在图标图像上方。请帮助我解决此问题。
供您参考，我在代码下方。我还在遇到问题的代码上方添加了一条注释：
<div class="navbar navbar-fixed-top navbar-inverse" style="position:fixed">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Below is the code to show icon image and text side by side. The icon image is of size 54 * 50-->
<a class="brand" href="index.php"><img style="position:absolute; top:0; bottom:0; margin:auto;" src="new_logo.png"/></a><p>Nice Site</p>
<div class="nav-collapse">
</div><!--/.nav-collapse -->
</div>
</div>
</div>
最佳答案
每当您要将元素放置在同一行上时，都有4个选项：
绝对/固定位置，这是不好的，因为它不是灵活的解决方案，而且任何一个元素的大小差异都可以使其摆脱困境。
向右/向左浮动是一种很常见的解决方案，虽然足够好，但缺点是很小-浮动元素的高度与预期的有所不同。此解决方案是定位较大内容块的首选方法-对于较小的文本段并不常见。
使用inline / inline-block可以使任何类型的块元素（如p）工作，就好像它是内联元素（如span）一样，这是使a锚的行为类似于块（按钮）的首选解决方案而不喜欢文字。
使用诸如span之类的实际内联是一种更具语义的方法，因为内容是根据其作用来构造的。
这是3.和4.的示例：
<div class="navbar navbar-fixed-top navbar-inverse" style="position:fixed">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Below is the code to show icon image and text side by side. The icon image is of size 54 * 50-->
<a class="brand" href="index.php">
<img src="new_logo.png"/>
</a>
<p style="display: inline-block;">Nice Site</p>
<span>Nice Site</span>
<div class="nav-collapse">
</div><!--/.nav-collapse -->
</div>