How to align two divs in a table cell

Question

I am trying to vertical align two divs in a table-cell, using bootstrap 3 RC1. I have applied the vertical-align class but what am I missing? Bootply here: http://bootply.com/73625

HTML

<div class="content">

  <div class="col-lg-6 col-md-6 col-12 child1">Child content</div>
  <div class="col-lg-6 col-md-6 col-12 child2">Child content</div>

</div>

CSS

.content{
position:absolute;
top:40px;
bottom:0px;
width:100%;
  border:4px solid green;
  display:table-cell;
  vertical-align:middle;

}

.child1{
  border:4px solid blue;
}

.child2{
  border:4px solid red;
}

Absolutely positioning an element negates `display: table-cell;` as it automatically makes an element block-level. — Adrift, Aug 12 '13 at 14:23
What position would work to achieve the 100% height I'm looking for? — alias51, Aug 12 '13 at 15:15

score 0 · Answer 1 · answered Aug 12 '13 at 14:31

0

Try this:

.content{
  position:absolute;
  top:40px;
  bottom:0px;
  width:100%;
  border:4px solid green;
  display:table-cell;
  vertical-align:middle;

}

.child1{
  border:4px solid blue;
  display: block;
  width: 100%;
}

.child2{
  border:4px solid red;
  display: block;
  width: 100%;
}

answered Aug 12 '13 at 14:31

fagace

116
3

try to put this property in each child: ::: margin: % 0; ::: where % is a percentage number that you want to put in the position. – fagace Aug 12 '13 at 16:30

How to align two divs in a table cell

1 Answers1