Vertical and horizontal centering of content in a responsive bootstrap grid

Question

I am working in a bootstrap project where i need some text to be centered vertically with another row. Obviously the two rows are not the same size hence the content size. Is there a way to solve this without escalating to flexbox or is this the way to go? Also i would like to maintain the responsiveness.

Fiddle: http://codepen.io/anon/pen/mPwxXa

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 col-xs-12">
        <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"/>
    </div>
    <div class="col-lg-6 col-xs-12">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

Answer 1

You can do this with Flexbox and media queries.

As for flexbox you can just use display: flex and align-items: center on parent element and that will be row in this case.

Now you just need to adjust min-width in media queries to be same as bootstrap breakpoints So for example if you are using col-sm-6 bootstrap class, then 768px is break point and you will use @media(min-width: 768px) { } in your media queries.

• For col-sm- you can use @media(min-width: 768px) Fiddle
• For col-md- you can use @media(min-width: 992px) Fiddle
• For col-lg- you can use @media(min-width: 1200px) Fiddle

@media(min-width: 768px) {
  .flex {
    display: flex;
    align-items: center;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row flex">
    <div class="col-sm-6">
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive" />
    </div>
    <div class="col-sm-6 text-center">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

Instead of Flexbox you can also get vertical-align with CSS Tables and again you have to adjust your queries with bootstrap breakpoints same as for flexbox. With tables you have to remove float from columns with float: none to get vertical-align.

@media(min-width: 768px) {
  .row.display_table {
    display: table;
  }
  
  .col-sm-6.left_cell, .col-sm-6.right_cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
  
  img {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row display_table">
    <div class="col-sm-6 left_cell">
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive" />
    </div>
    <div class="col-sm-6 right_cell text-center">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

Answer 2

I don't want to be too simple, but you are wondering if flexbox is the way to go. Actually, at this time, it is.

The reason behind the text container is that you don't need to use text-align:center; to center your text if you don't want to, but it is still horizontal centered.

body {
  padding: 2em;
}

@media (min-width: 1200px) {
  .vcenter {
    display: flex;
    align-items: center;
  }

  .text {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row vcenter">
    <div class="col-lg-6 col-xs-12 ">
        <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"/>
    </div>
    <div class="col-lg-6 col-xs-12">
      <div class="text">
        <p>This is some text some te xt some more text</p>
        <p>This is some text some text some more text</p>
        <p>This is some text some text some more text</p>
        <p>This is some text some text some more text</p>      
      </div>
    </div>
  </div>
</div>

Answer 3

You could create a div with relative position like:

<div style='position: relative; top: 50%; transform: translateY(50%); height:100%;'>

To encapsulate all the <p> tags and align middle. There are a lot of methods like (http://vanseodesign.com/css/vertical-centering/):

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

but with inline elements didn't work quite well. Note I change the col-lg-6 to col-sm-6, because in codepen you could see the 2 columns.

Extracted from here: https://davidwalsh.name/css-vertical-center

Here a working codepen: http://codepen.io/jpaulet/pen/bpRvyd?editors=1100

Hope it helps!