Html 浮动div中包含的垂直中心div
我有一个div在一个float中:left div,它不想垂直对齐。我想我可以用内部div完全填充浮动div,并将其设置为display:table cell,但它似乎不想同时填充div并允许显示Html 浮动div中包含的垂直中心div,html,css,Html,Css,我有一个div在一个float中:left div,它不想垂直对齐。我想我可以用内部div完全填充浮动div,并将其设置为display:table cell,但它似乎不想同时填充div并允许显示 只需添加display:table至#选项卡3 我真的不明白你的问题吗显示:表格:单元格似乎工作正常。尝试调整输出窗口的大小,你可以看到我在说什么?嗯,我没有看到我期望的变化?我希望“绿色”垂直居中,上面和下面的粉红色相等……这正是我所需要的,这是有道理的。谢谢你。 <div id="tabs
只需添加
display:table代码>至#选项卡3
我真的不明白你的问题吗<代码>显示:表格:单元格
似乎工作正常。尝试调整输出窗口的大小,你可以看到我在说什么?嗯,我没有看到我期望的变化?我希望“绿色”垂直居中,上面和下面的粉红色相等……这正是我所需要的,这是有道理的。谢谢你。
<div id="tabs-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false" style="">
<div id="DivToCenter">
<div id="ButtonContainer">
<ul>
<li><div class="TemplateButton"><a href="http://www.google.com">Report an Issue</a></div></li>
<li><div class="TemplateButton"><a href="http://www.google.com">Report an Issue</a></div></li>
<li><div class="TemplateButton"><a href="http://www.google.com">Report an Issue</a></div></li>
<li><div class="TemplateButton"><a href="http://www.google.com">Report an Issue</a></div></li>
</ul>
</div>
</div>
</div>
#tabs-3 { /* Tab Content Panel (Right Panel)*/
float: left;
min-height: 300px; /* How tall is our tab box, minimum?*/
text-align: center;
background-color: pink;
}
#DivToCenter {
width: 100%;
height: 100%;
background: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#ButtonContainer {
width: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 10px;
background: green;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#ButtonContainer > ul {
padding: 0;
margin: 0;
display: inline-block;
}
#ButtonContainer > ul > li {
display: inline-block; /*Puts the buttons in a line*/
}
.TemplateButton {
padding-left: 5px;
padding-right: 5px;
}
.ui-tabs-panel.ui-widget-content .TemplateButton > a {
/* SHAPE */
width: 119px;
height: 119px;
padding: 15px;
margin-left: 3px;
margin-right: 3px;
border: 1px solid white;
border-radius: 15px;
-moz-border-radius: 15px;
/* ALIGNMENT */
display: table-cell;
vertical-align: middle;
text-align: center;
/* STYLING */
font-weight: bold;
font-size: 1.25em;
color: white;
background-color: #0c428f;
}
.ui-tabs-panel.ui-widget-content .TemplateButton > a:hover {
background-color: #6795bb;
}