Question

我有以下html块（图像只是我在网上找到的东西）。我已经使用多个示例和来自不同问题的答案来解决我遇到的类似问题，但我似乎无法弄清楚。

在图像旁边垂直对齐文本的正确或最佳方法是什么？我目前正在使用bootstrap 3.3.6。我尝试使用不同的方法，但似乎无济于事。

.textContainer {
  display: table;
}

.imageClass {
  margin: 5px;
}

.spanText {
  display: table-cell;
  align-items: middle;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 textContainer">
      <img class="imageClass" width=100 height=100 src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text" />
      <span class="spanText">Need to center</span>
    </div>
  </div>
</div>

Answer 1

您只需删除display: table; CSS，然后使用引导程序的默认img { vertical-align: middle; } CSS即可垂直对齐文本。

.imageClass {
  margin: 5px;
  width: 100px;
  height: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 textContainer">
      <img class="imageClass" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text">
      <span class="spanText">Need to center</span>
    </div>
  </div>
</div>

您也可以在父级上使用display: flex;与align-items: center;一起使用，以将flex子级垂直对齐。

.textContainer {
  display: flex;
  align-items: center;
}

.imageClass {
  margin: 5px;
  width: 100px;
  height: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 textContainer">
      <img class="imageClass" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text">
      <span class="spanText">Need to center</span>
    </div>
  </div>
</div>

与Bootstrap垂直对齐

1 个答案: