html - 在以下场景中，如何在 Bootstrap 框架中并排设置图标图像和文本标题？

Question

我正在为我的网站使用 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>

Answer 1

每当你想将元素放置在同一行时，你有 4 个选项:

1. 绝对位置/固定位置很糟糕，因为它不是一个灵活的解决方案，而且任一元素的大小差异都会导致这种情况出现问题。
2. 向右/向左浮动是一种非常常见的解决方案，它已经足够好了，但它有一个小缺点—— float 元素的高度与预期的行为不同。此解决方案是定位较大内容 block 的首选——对于较小的文本 block 来说并不常见。
3. 使用 inline/inline-block 这使得任何类型的 block 元素(如 p)都像 span 这样的内联元素一样工作，这是首选使 a anchor 表现得像 block (按钮)而不像文本的解决方案。
4. 使用实际的内联，例如 span，这是一种更具语义的方法，因为内容是根据其 Angular 色构建的。

这是 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>