Align a group of divs to horizontal center

Question

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>

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — jacefarm, Sep 22 '17 at 03:47

nilesh · Answer 1 · 2016-09-17T07:11:13.697

is this what you want??

.test{
  position: fixed;
top: 40%;
width: 100%;

}
.test1{
 width: 450px;
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;
text-align: center;
}
.tab_selected{ 
 background-color:#fcefcc;
}

<div class="test">
  <div class="test1">
      <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>

Hi @nilesh..yes this is exact what I want.....I will try it in my final code and see....Thanks a lot for your help... — KT B, Sep 17 '16 at 07:21

score 1 · Accepted Answer · edited Sep 22 '17 at 03:46

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>

score 1 · Answer 3 · answered Sep 17 '16 at 07:28

not enough reputation to comment. so writing here. What do you exactly want? you want to position your div in the center of screen or to fix to center??

To make div center-> use margin:0 auto

.parent{
 width:900px;
  position:relative;
}
.child{
  width:400px;
  margin:0 auto;
  background:gray;
  color:#fff;
}

<div class="parent">
  <div class="child">
    center div
  </div>
 </div>

Align a group of divs to horizontal center

3 Answers3