Question

在下面的布局中，3个div未对齐到水平中心。如果我摆脱display:table-cell样式，则div中的文本将不会与垂直中心对齐。

如何保持这些div水平居中，同时保持display:table-cell样式？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这就是你想要的吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将三个<div>放入新的<div>中，然后将以下样式添加到新的<div>中：

style =＆＃34; width：87％; margin：0 auto;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

没有足够的声誉来发表评论。所以在这里写你究竟想要什么？你想把你的div放在屏幕的中心还是固定到中心？

制作div center-＆gt;使用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>

将一组div对齐到水平中心

3 个答案: