如何让我的内容集中在这个响应式 div 中？

Question

我有 4 列在移动设备上变成 1 列。这在移动设备上看起来很好，但我想将每行的 div 2 和 4 中的内容居中。最好的方法是什么？

显然我的编辑被删除了，或者网站搞砸了，但我说过我想做这个垂直和水平的。但是，我忘记链接到该页面是我的错。对不起大家。 - http://www.dismantledesign.com/testsite2/clients.html

编辑：我很欣赏所有的答案，但我认为没有人明白这个 div 没有设定高度。我只希望文本和图标在屏幕移动时保持居中。 flex 似乎不起作用，因为它需要为 div 设置高度。

我还简化了我的 HTML

代码

.clientsdetail {
  text-align: center;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden; 
}
.clientinfo h3 {
  padding-top: 10px;;
}
.clientinfo p {
  padding: 0px 30px;
  font-size: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-3 nopadding">
      <img class="img-responsive" src="img/clients/ivey.jpg">
    </div>
    <div class="col-md-3 nopadding cinfo">
      <div class="clientinfo text-center">
        <h3>IVEY</h3>
        <p>Clarksville, TN</p>
        <div class="social-icons-clients">
          <a href="#"><span class="icon-sprite sprite-ig">&nbsp;</span></a>
          <a href="#"><span class="icon-sprite sprite-fb">&nbsp;</span></a>
          <a href="#"><span class="icon-sprite sprite-gp">&nbsp;</span></a>
          <a href="#"><span class="icon-sprite sprite-sc">&nbsp;</span></a>
          <a href="https://twitter.com/contracoda" target="_blank"><span class="icon-sprite sprite-tw">&nbsp;</span></a>
        </div>
      </div>
    </div>

    <div class="col-md-3 nopadding cinfo">
      <img class="img-responsive" src="img/clients/rufus.jpg">
    </div>
    <div class="col-md-3 nopadding">
      <div class="clientinfo text-center">
        <h3>RUFUS DAWKINS</h3>
        <p>Clarksville, TN</p>
        <div class="social-icons-clients">
          <a href="#"><span class="icon-sprite sprite-ig">&nbsp;</span></a>
          <a href="#"><span class="icon-sprite sprite-fb">&nbsp;</span></a>
          <a href="#"><span class="icon-sprite sprite-gp">&nbsp;</span></a>
          <a href="#"><span class="icon-sprite sprite-sc">&nbsp;</span></a>
          <a href="https://twitter.com/contracoda" target="_blank"><span class="icon-sprite sprite-tw">&nbsp;</span></a>
        </div>
      </div>
    </div>	
</div>

Answer 1

您可以使用 flex 属性使您的内容居中。

更多详情，您可以查看

Flexbox: center horizontally and vertically

Answer 2

（已更新） 您可以使用Pseudoclass 选择 2 和 4 div。

.row div:nth-child(2n) {
/* Your CSS Style */
}

如果 2 和 4 div 里面的内容是inline/inline-block，就用text-align: center;。

演示

这是pseudoclass 的简单演示。

.row > div {
padding: 10px;
}

.row > div:nth-child(2n) {
color: #fff;
background: red;
text-align: center;
height: 50px;
display: flex;
align-items: center;
 justify-content: center;
}

<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>

希望这对您有所帮助。 谢谢。

Answer 3

尝试不同的方法。 Bootstrap 的浮动网格系统无法将您带到您想要的地方。

首先，删除 row 和 col- 类，这样你就有了这样的东西：

<div class="my-row">
    <div></div>
    <div></div>
    <div></div>
</div>

然后使用 CSS 实现与之前相同的结果，但内容居中对齐：

@media (min-width: 992px) {
  .my-row {
    display: flex;
    align-items: stretch;
  }

  .my-row > div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

如果您使用的是 SASS，请将硬编码的 992px 替换为 @screen-md-min 变量。

---

这是您简化示例的 JsFiddle：
https://jsfiddle.net/mpnz9b30/1/

Answer 4

<div class="col-md-6 nopadding cinfo">
    <div class="clientinfo">
        <h3>IVEY</h3>
        <p>Clarksville, TN</p>
        <div class="social-icons-clients">
            <a href="#"><span class="icon-sprite sprite-ig">&nbsp;</span></a>
            <a href="#"><span class="icon-sprite sprite-fb">&nbsp;</span></a>
            <a href="#"><span class="icon-sprite sprite-gp">&nbsp;</span></a>
            <a href="#"><span class="icon-sprite sprite-sc">&nbsp;</span></a>
            <a href="https://twitter.com/contracoda" target="_blank">
                <span class="icon-sprite sprite-tw">&nbsp;</span>
            </a>
        </div>
    </div>
</div>