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

所以，你走了。

如果您使用的是bootstrap，则可以使用它提供的类。 col-xs-*这应该在班级row内。这是引导结构。
当您要求将内容中心与图像对齐时，您需要添加更多类作为其添加项。在这里，我添加了menu-item flex。

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

试试这样。我希望它会帮助你。祝你好运！

.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>

Answer 2

您应该使用.container >div上的display：flex和align-items:center以及justify-content:center

另外，如果您使用的是bootstrap，为什么不在row和col s中构建html？这是bootstrap的用途：）

例如，在您的情况下，使用类似

的结构

<div class="container-fluid">
    <div class="row">
         <div class="col-sm-4">
         </div>
         <div class="col-sm-4">
         </div>
         <div class="col-sm-4">
         </div>
    </div>
 </div>

无论如何，请参阅下面的解决方案

＆＃13;

.container-fluid {
  padding: 0 !important;
  margin: 0 !important;
}

.container-fluid > div {
  width: 33.33%;
  float: left;
  background-color: #34caf7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-fluid > div > img {
  float: left;
  margin: auto;
  width: 20%;
}

.container-fluid > div > div {
  float: left;
  color: white;
  display: block;
  margin: auto;
}

@media (max-width: 480px) {
  .container-fluid > div {
    display: block;
    width: 100%;
  }
}

＆＃13;

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

＆＃13;

Answer 3

您可以使用flex-box进行探索，以利用其精确定位，并允许（让）浏览器执行所有计算和其他繁重工作。

我还考虑了你的@media-query来对该视口进行必要的调整。

Updated JSFiddle

代码段示范：

.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-fluid > div {
    background-color: #34caf7;
    flex: 1 1 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-fluid > div > img {
    float: left;
    width: 20%;
    margin-right: 30px;
}

.container-fluid > div > div {
    color: white;
    display: block;
}
@media (max-width: 480px) {
    .container-fluid > div {
        flex: 1 1 100%;
        padding: 10px;
    }

    .container-fluid {
        flex-direction: column;
    }
}

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

有关跨浏览器兼容性的说明：

flex-box对旧版浏览器的支持有限或不支持，在考虑在生产中使用之前参考兼容性概述 - 如果支持IE11（ shudder ）仍然是关心你。

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

3 个答案: