所以我想在div中间居中放置文本。
我看了一半的网站,看起来我必须像这样做:
.container{
width:100px;
height:200px;
display:table-cell;
vertical-align: middle;
line-height: normal;
}
但这行不通...
这是我的工作:
HTML:
<div id="left_bot" class="menu_button"><span class="text_menu_button">Div1</span></div>
CSS:
.menu_button{
width:37%;
height: 44%;
text-align: center;
display: table-cell;
vertical-align: middle;
line-height: normal;
font-size: 48px;
}
#left_top{
top:0;
float:left;
background-color: red;
margin: 2% 1% 1% 2%;
}
但是我仍然将文本放在中间,但不在div的中间。
我不明白为什么,我试图在.text_menu_button上插入vertical-align,但是还是没有:x
谢谢
最佳答案
.container应该具有display: table;
和.menu-bottom display: table-cell;
才能将表的行为应用于CSS。
的HTML
<div class="container">
<div id="left_bot" class="menu_button"><span class="text_menu_button">Div1</span>
</div>
</div>
的CSS
.container {
height:200px;
display:table;
width: 100%;
}
.menu_button {
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 48px;
}
演示:http://jsfiddle.net/ALB6D/1/