KT B KT B - 28 days ago 7
CSS Question

Align a group of divs to horizontal center

In the layout below, the 3 divs are not aligning to horizontal center. If I get rid of

display:table-cell
style, then the text in the divs will not align to vertical center.

How do I get these divs horizontally centered, while keeping the
display:table-cell
style as it is?



.tab_normal {
margin-left: -1px;
width: 148px;
height: 35px;
display: inline-block;
padding: 10px;
cursor: pointer;
background-color: #ffffff;
border: 1px solid #cccccc;
display: table-cell;
vertical-align: middle;
line-height: 1.3;
}

.tab_selected{
background-color:#fcefcc;
}

<div style="text-align: center; border: thin dotted red; margin-top: 19px; margin-left: 27px; height: 58px; width: auto;">

<div id="page3_tab_1" class="tab_normal tab_visited" onclick="onTabClick(this)" isenable="true" iscomplete="true">Runway Conditions</div>
<div id="page3_tab_2" class="tab_normal tab_visited" onclick="onTabClick(this)" isenable="true" iscomplete="true">Ambient Conditions</div>
<div id="page3_tab_3" class="tab_normal tab_selected" onclick="onTabClick(this)" isenable="true" iscomplete="true">Minimum Flap<br>Retraction Height</div>

</div>




Answer Source

Put the three <div> inside a new <div> and then add the following styles to the new <div>:

style="width: 87%;margin: 0 auto;

.tab_normal {	
  margin-left: -1px;
  width: 148px;
  height: 35px;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.3;
}

.tab_selected{	
	background-color:#fcefcc;
}
<div style="text-align: center; border: thin dotted red; margin-top: 19px; margin-left: 27px; height: 58px; width: auto;">
  <div style="width: 87%;margin: 0 auto;">
    <div id="page3_tab_1" class="tab_normal tab_visited" onclick="onTabClick(this)" isenable="true" iscomplete="true">Runway Conditions</div>
    <div id="page3_tab_2" class="tab_normal tab_visited" onclick="onTabClick(this)" isenable="true" iscomplete="true">Ambient Conditions</div>
    <div id="page3_tab_3" class="tab_normal tab_selected" onclick="onTabClick(this)" isenable="true" iscomplete="true">Minimum Flap<br>Retraction Height</div>
  </div> 
 </div>