[英]vertical text center in <div>
So i am trying get 2 div-containers which both should contain centered text (Both x- and y-axis). 所以我正在尝试获得2个div容器,它们都应包含居中文本(x轴和y轴)。
Thanks to Google and stackoverflow, i stumbled over a few workarounds which play with vertical-align etc. But nothing seems to work. 感谢Google和stackoverflow,我偶然发现了几个与vertical-align等相关的解决方法。但似乎没有任何效果。
#right-menu {
position: absolute ;
right: 0% ;
top: 0% ;
height: 100% ;
width: 5% ;
text-align: center ;
background: #ededed ;
display: table-cell;
vertical-align: middle ;
Here is a fiddle: 这是一个小提琴:
Basically first you have to define the parent element as table from CSS and then you can display its child element as a table cell. 基本上首先你必须从CSS中将父元素定义为表,然后你可以将它的子元素显示为表格单元格。
For example, 例如,
div.parent {
display: table;
}
div.parent div.child {
display: table-cell;
vertical-align: middle;
}
Check out this link, it would clarify your queries.. http://css-tricks.com/vertically-center-multi-lined-text/ 看看这个链接,它会澄清你的疑问.. http://css-tricks.com/vertically-center-multi-lined-text/
Vertical-align:middle
property is not used with position:absolute;
Vertical-align:middle
属性不与position:absolute;
if you are using vertical-align:middle then try this layout modified layout http://jsfiddle.net/7Rgvs/5/ 如果你使用vertical-align:middle然后尝试这个布局修改后的布局http://jsfiddle.net/7Rgvs/5/
use display: table for the (holder #left-menu element) and display: table-cell for the inner holder element and use this styles: 使用display:table作为(holder#left-menu element)并显示:table-cell作为内部holder元素并使用以下样式:
#left-menu .inner {
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
width: 100%;
}
i have edit the left menu inside your fiddle: http://jsfiddle.net/7Rgvs/ 我编辑了小提琴内的左侧菜单: http : //jsfiddle.net/7Rgvs/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.