我需要你的帮助,
我似乎无法在我的div中自动将文本置于中心位置。
电流:
预期结果: 这是HTML标记:
CSS
#alertBox_container {
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid #808080;
position: relative;
color: rgb(11,63,113);
background: #FFF;
font-family: Arial;
}
#alertBox {
height: 100px;
width: 400px;
bottom: 50%;
right: 50%;
position: absolute;
}
#alertBox_titlebar {
line-height:24px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
font-weight: bold;
font-size: 9pt;
}
.alertBox_Button {
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
.alertBox_Button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_close {
line-height: 11px;
width: 18px;
font-size: 9pt;
font-weight: bold;
margin: 2px;
padding: 1px;
position:absolute;
top:0px;
right:0;
}
#alertBox_text_container {
width: 100%;
height: auto;
text-align: center;
}
#alertBox_text {
font-size: 9pt;
width: 100%;
}
#alertBox_div_btn_OK {
width: 100%;
text-align: center;
margin: 5px;
}
#alertBox_btn_OK {
height: 20px;
width: 50px;
font-size: 9pt;
}
HTML
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text_container"><div id="alertBox_text">this is some text that should be vertically centered</div></div>
</div>
</div>
</div>
答案 0 :(得分:2)
这是一个解决方案:Fiddle。
主要想法是使用
display: table-cell
vertical-align: middle;
它可能无法在不支持css display property的table-cell
值的旧浏览器中使用。
在这种情况下,here is一般来说是一个非常好的解释和解决方案。
答案 1 :(得分:1)
您可以使用margin-top
style
#alertBox_text_container {
width: 100%;
height: auto;
text-align: center;
margin-top:20px;
}
<强> Live Demo 强>
答案 2 :(得分:1)
垂直居中很棘手。手动计算百分比并添加适当的边距或填充是最简单和最一致的。还有其他方法可以做到这一点。我已经提供了下面我知道的四种方法。
<强> CSS 强>
.center-1{
position:absolute;
top:50%;
width:100%;
height:1em; /* need a fixed height for the element */
margin-top:-.5em; /* offset height with negative margin */
text-align:center;
}
.center-2{
width:100%;
height:100%;
display: table-cell;/* IE8+ */
vertical-align: middle;
text-align:center;
}
.center-3{
width:100%;
line-height: 300px;/* height of your container */
text-align:center;
}
.center-4{
margin-top:29%;/* manual guess that will scale with the box */
width:100%;
text-align:center;
}
.container{
height:300px;
width:500px;
margin:20px;
border:1px solid black;
position:relative;
display: table;/* needed for center-2 */
}
<强> HTML 强>
<div class="container">
<div class="center-1">
Center Me!
</div>
</div>
<div class="container">
<div class="center-2">
Center Me!
</div>
</div>
<div class="container">
<div class="center-3">
Center Me!
</div>
</div>
<div class="container">
<div class="center-4">
Center Me!
</div>
</div>
答案 3 :(得分:0)
我将获取要将文本居中的区域的高度,然后将该数字添加到元素的行高。在这种情况下,您有24px标题,文本容器留下76px。所以补充:
#alertBox_text_container {
line-height: 76px;
}
应该得到你想要的东西。还有其他方法,但对于单线中心来说这是最简单的方法。