![](/img/trans.png)
[英]How to display divs side by side inside a list (inline-block doesn't work) while vertically align the right div (vertical-align doesn't work)
[英]vertically align text in a div vertical-align don't work
所以我想在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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.