麻烦(垂直)使用相对%大小调整在另一个DIV中居中文本
免责声明:我不相信这是重复的,因为我使用相对大小来生成全屏网格布局而不使用px.
问题:在这个jsFiddle http://jsfiddle.net/X3ZDy/73/我有四个相同比例的盒子.它们的设计跨越屏幕宽度并保持正方形.其中包含一些样本方形DIV(40%x 40%).我正在努力让文本标签lbl水平和垂直居中bbl.
我见过(并尝试过)的所有例子都不起作用,因为它们要求我知道标签的高度,或者他们使用浏览器限制的table-layout技巧.我需要按照小提琴的所有相对尺寸来做这个.
有人可以帮忙吗？我需要使用纯CSS(无JS)解决方案来处理所有浏览器.令我感到惊讶的是,在div中垂直对齐文本似乎非常棘手.我不介意我们使用块或内联元素作为文本标签.
请注意,我不是在寻找一个TABLE解决方案,这是一个DIV和CSS拼图,需要一个有效的jsFiddle.
更多: 感谢所有人的答案,但是对于未来的海报,请注意(width == padding-bottom)是允许我的DIV成为方形的魔力.这是网格布局系统的关键,所以我需要保持这一点.
更新 使用相对大小并没有固定的高度相当棘手,但我想我终于找到了问题的答案(下图).
cir*_*rus 15
我想我终于找到了有效问题的答案.问题在于,当孩子的体型发生变化且没有任何高度可知时,我所看到的几乎所有其他解决方案都无法应对.我需要这个以适应所有%设计的响应,其中任何地方都没有固定的高度.
我偶然发现了这个SO答案使用CSS 3垂直对齐这是我的灵感.
首先,使用全%设计,您需要一个零高度包装元素作为父元素中的定位占位符;
<body>
<div class="container">
<div class="divWrapper">
<div class="tx">This text will center align no matter how many lines there are</div>
</div>
</div>
</body>
在这种情况下,我的容器是一个简单的盒子瓷砖;
.container
{
margin:2%;
background-color:#888888;
width:30%;
padding-bottom:30%; /* relative size and position on page */
float: left;
position:relative; /* coord system stop */
top: 0px; /* IE? */
}
所以没有什么特别之处,除了它没有高度使得这个定心元素的一般问题变得棘手.它需要绝对定位,以便我们可以在子元素中使用定位坐标(我认为这可能需要IE中的"顶部").
接下来,绝对定位的包装器将完全覆盖父元素并将其完全填满.
.divWrapper
{
position:absolute;
top:0px;
padding-top:50%; /* center the top of child elements vetically */
padding-bottom:50%;
height:0px;
}
填充意味着任何子元素都将从父元素的正中间开始,但此包装器本身没有高度,并且页面上不占用任何空间.
没什么新鲜的.
最后,我们想要居中的子元素.这里的诀窍是让子元素根据它自己的高度垂直向上滑动.您不能使用50%,因为父容器的50%不是自己的.看似简单的答案是使用转换.我不敢相信我之前没有发现过这个;
.tx
{
position: relative;
background-color: transparent;
text-align: center; /* horizontal centering */
-webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod="auto expand")'; /*IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand'); /*IE6, IE7*/
transform: translateY(-50%);
}
这是小提琴
但是,我没有在IE6 +上测试过这个,所以如果有人想验证我的Matrix变换,我会很感激.
更新
事实证明甚至不需要包装器.这就是正确垂直居中所需的一切;
.tx
{
width:100%; // +1 to @RonM
position: absolute;
text-align: center;
padding-top:100%;
-webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0)'; /*IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0); /*IE6, IE7*/
transform: translateY(-50%);
}
和更新的小提琴
但是仍然没有在IE6中工作 - 看看那些转换,我认为没有JavaScript可以为那些遗产做到这一点.
- 如果你只有一个单词,它就不会居中.您需要为"tx"类添加宽度:100%和高度:100%. (3认同)