如何才能让我的内容在此响应DIV中心？

我有4分列在一排成为移动1列。这看起来移动的方式是好的，但我想中心的每个行中的div 2的内容和4。什么是最好的方法来做到这一点？如何才能让我的内容在此响应DIV中心？

显然我的编辑被删除或网站搞砸了，但我曾说过我想做这个垂直和水平。但是，这是我的错，我忘了链接到页面。对不起大家。 - 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> \t 
 
</div>

来源

2017-10-06 Dismantle

你忘了关上了标签... –

它看起来像我错过了span标记了很多与这些精灵的步伐的。感谢您指出了这一点。 – Dismantle

（修订版） 可以使用Pseudoclass选择2和4格。

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

如果第2和第4格中的内容是inline/inline-block，只需使用text-align: center;。

演示

下面是简单的演示。

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

希望这是对你有帮助。谢谢。

来源

2017-10-06 13:22:31

这只是水平居中。我也想把它居中。 – Dismantle

我只给出了演示，为了您的关注，您可以添加“display：flex”和“align-item：center;”和“证明内容：中心”;属性垂直和水平居中对齐。 –

“align-items：center;” –

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

了解更多详情，您可以检查

Flexbox: center horizontally and vertically

来源

2017-10-06 13:25:28 Aman

我试过实现这个，但它没有改变一件事。 – Dismantle

你是如何实现这一点的。你能分享你的代码吗？ – Aman

-1

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

来源

2017-10-06 13:28:13

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 - [来自评论]（/ review/low-quality-posts/17549488） – Habibillah

尝试不同的方法。 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/

来源

2017-10-06 20:48:38

如何才能让我的内容在此响应DIV中心？

回答

相关问题