How can I get my content centered in this responsive 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>

It looks like I missed the span tag in a lot of paces with these sprites. Thanks for pointing that out. — Dismantle, Oct 06 '17 at 13:50

Satheesh Kumar · Answer 1 · 2017-10-06T13:58:17.390

0

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

edited Oct 06 '17 at 13:58

answered Oct 06 '17 at 13:22

Satheesh Kumar

2,205
1
16
31

That just centers it horizontally. I want to center it vertical too. – Dismantle Oct 06 '17 at 13:51
I have given only the demo, for your concern you can add "display: flex" and "align-item: center;" and "justify-content: center;" property to align vertically and horizontally center. – Satheesh Kumar Oct 06 '17 at 13:52
"align-items: center;" – Satheesh Kumar Oct 06 '17 at 13:58

score 0 · Answer 2 · answered Oct 06 '17 at 13:25

0

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

for more details, you can check

Flexbox: center horizontally and vertically

answered Oct 06 '17 at 13:25

Aman

642
1
5
12

I have tried implementing this, but it didn't change a thing. – Dismantle Oct 06 '17 at 13:57
How did you implement this. Can you share your code.? – Aman Oct 06 '17 at 20:44

m.spyratos · Answer 3 · 2017-10-06T20:54:52.193

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/

score -1 · Answer 4 · edited Oct 07 '17 at 04:16

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

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

4 Answers4