How can I get my content centered in this responsive div? - html

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">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</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">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
</div>

Answer 1

You can use flex properties to make your content to center.
for more details, you can check
Flexbox: center horizontally and vertically

Answer 2

(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 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">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<a href="https://twitter.com/contracoda" target="_blank">
<span class="icon-sprite sprite-tw"> </span>
</a>
</div>
</div>
</div>