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

<强>（修订版）您可以使用Pseudoclass选择2和4 div。

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

如果2和4 div中的内容为inline/inline-block，请使用text-align: center;。

<强>演示

以下是pseudoclass的简单演示。

＆＃13;

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

＆＃13;

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

＆＃13;

希望这对你有所帮助。感谢。

Answer 2

您可以使用弹性属性将内容置于中心位置。

有关详细信息，请查看

Flexbox: center horizontally and vertically

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

SharpDX.DXGI.Surface

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

4 个答案: