css - 将 div 的内容水平/垂直居中并将文本与图像对齐

Question

我有一个 bootstrap div 容器，分为 3 个大小相等的 div(宽度相等但不确定如何保持高度)。我无法将它的内容垂直和水平居中。此外，我无法弄清楚如何将位于图像右侧的文本居中。

我的 HTML 代码:

<div class="container-fluid">
  <div>
    <img src="https://image.ibb.co/cjLadR/icon_1.png" alt="icon_1">
    <div> Test comments </div>
  </div>
  <div>
    <img src="https://image.ibb.co/gDrgJR/icon_2.png" alt="icon_2">
    <div> Test comments </div>
  </div>
  <div>
    <img src="https://image.ibb.co/hm1Rk6/icon_3.png" alt="icon_3">
    <div> Test comments </div>
  </div>
</div>

这里是 JsFiddle

我的预期输出:

Answer 1

给你吧。

1. 如果您使用的是 Bootstrap ，则可以使用它提供的类。 col-xs-* 这应该在 row 类中。这是 Bootstrap 结构。

2. 当您要求将内容中心与您的图像对齐时，您需要添加更多类作为补充。在这里，我添加了 menu-item 和 flex。

除非确实有必要，否则请不要覆盖 Bootstrap 类。

这样试试。希望对您有所帮助。祝你好运!

.container-fluid > div {
  background-color: #34caf7;
}

.menu-item {
  display: flex;
  justify-content: center;
  padding: 10px 20px;
  align-items: center;
}
.menu-item img {
  height: 50px;
  width: 50px;
  margin-right: 10px;
}
.menu-item img + div {
  font-size: 13px;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 col-xs-12">
      <div class="menu-item">
        <img src="https://image.ibb.co/cjLadR/icon_1.png" alt="icon_1">
        <div> Test comments </div>
      </div>
    </div>
    <div class="col-sm-4 col-xs-12">
      <div class="menu-item">
        <img src="https://image.ibb.co/gDrgJR/icon_2.png" alt="icon_2">
        <div> Test comments </div>
      </div>
    </div>
    <div class="col-sm-4 col-xs-12">
      <div class="menu-item">
        <img src="https://image.ibb.co/hm1Rk6/icon_3.png" alt="icon_3">
        <div> Test comments </div>
      </div>
    </div>
  </div>
</div>