如何使我的内容集中在该响应式div中？

Question

I have 4 columns in a row that become 1 column on mobile. The way this looks on mobile is fine, but I want to center the content in divs 2 and 4 in each row. What would be the best way to do this?

Apparently my edit was deleted or the site messed up, but I had said I want to do this vertical and horizontal. However, it was my fault I forgot to link to the page. Sorry, guys. - http://www.dismantledesign.com/testsite2/clients.html

Edit: I appreciate all the answers, but I don't think anyone understands that this div has no set height. I just want that text and icons to stay centered as the screen moves. The flex didn't seem to work because it required setting a height to the div.

I also simplified my HTML

Code

 .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

(UPDATED) You can use the Pseudoclass to select the 2 and 4 div.

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

If the content inside the 2 and 4 div are inline/inline-block , just use text-align: center; .

Demo

Here is the simple demo for the 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> 

Hope this is helpful for you. Thanks.

Answer 2

You can use flex properties to make your content to center.

for more details, you can check

Flexbox: center horizontally and vertically

Answer 3

Try a different approach. Bootstrap's floating grid system will not get you where you want.

First, remove row and col- classes so you have something like this:

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

Then use CSS to achieve the same result as before, but with the content aligned center:

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

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

If you are using SASS, then replace hardcoded 992px with the @screen-md-min variable.

---

Here's a JsFiddle of your simplified example:
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>