KT B KT B - 2 months ago 5
CSS Question

Can someone help me in my layout issue?

In the below layout my 3 divs are not getting aligned horizontal center. If I get rid of display:table-cell style, then 1st to divs text will not align vertical center.

Can somebody help me to get these divs aligned horizontally center with 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

is this what you are looking for.if yes, then here are the things i have changed. I have added the three divs inside a new div then added

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

to the new div.

.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>

Comments