如何在以下方案中在引导框架中并排设置图标图像和文本标题

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. 右/向左浮动，这是一个非常常见的解决方案，它已经足够好了，但它有一个小缺点——浮动元素的高度与预期不同。此解决方案是定位较大内容块的首选 - 对于较小的文本片段并不常见。
使用内联
3. /内联块，使任何类型的块元素(例如p(像内联元素(例如span(一样工作，这是使a锚点行为像块(按钮(而不是文本的首选解决方案。
4. 使用实际的内联(如 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>

Answer 2

只需在文本中添加padding-left(<p>标签(

小提琴