Bootstrap 3 divs positioning

Question

I have a layout that i need to build as can be seen in the image:

Layout overview

Grey stands for header, and there are no problems there. As for the body, I've split it into 3 divs as follows:

<div class="row">
   <div class="col-lg-3">
     <p>text positioned right here</p>
   </div>
   <div class="col-lg-6">
     <a href="#"><img src="path/to/image.jpg"></a>
   </div>
   <div class="col-lg-3">
     <p>text positioned right here</p>
   </div>
</div>

The problem I have is that I need that text to be vertically centered, and I don't know how. I've tried this solution Twitter Bootstrap 3, vertically center content but it doesn't seem to work for me (maybe I'm doing something wrong). I've tried adding padding-top to fix it, but it messes up the mobile display (as expected).

Please, can anyone help?

Thank you.

Please have a look here http://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically . — Christos, Jun 18 '14 at 09:44
http://stackoverflow.com/questions/10009514/how-to-center-the-contents-of-a-div/10010055#10010055 — ShibinRagh, Jun 18 '14 at 09:56

score 0 · Answer 1 · edited Jun 18 '14 at 10:14

0

Text align property is only for horizontal text align, if you want to make text align vertically you need to use position property, we can make using text align something like that. for example: use center of the screen property.

position:relative;
left:50%; top:50%;

also minus margin property off of the container with.

edited Jun 18 '14 at 10:14

Mo.

26,306
36
159
225

answered Jun 18 '14 at 09:52

user3722353

1
1

score 0 · Answer 2 · answered Jun 18 '14 at 16:00

The simplest way to center vertically is to add display:table to the containing element, and display:table-cell to the element you want centered. Bootstrap has a .text-center class to handle the horizontal centering.

http://www.bootply.com/lTigluKakK

Using your example as template:

  <div class="col-xs-3 text-center v-align-container">
     <p class="v-align-content">text positioned right here</p>
   </div>
   <div class="col-xs-6 text-center">
     <a href="#"><img src="//placehold.it/400x400"></a>
   </div>
  <div class="col-xs-3 text-center v-align-container">
     <p class="v-align-content">text positioned right here</p>
   </div>

CSS:

.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */
.v-align-content{display:table-cell;vertical-align:middle}

This works great if you're able to define the height of the sidebar divs. But, if you need them to match the height of the center element dynamically, you'll need a little more bootstrap magic to tie them together, but this will still apply to centering the content within those sidebars.

Bootstrap 3 divs positioning

2 Answers2