麻烦（垂直）在另一个DIV中居中的文本（相对大小）

小编典典

麻烦（垂直）在另一个DIV中居中的文本（相对大小）

css

免责声明： 我不相信这是重复的，因为我使用相对尺寸来生成全屏网格布局而不使用px。

问题： 在这个jsFiddle中，我有四个等比例的框。它们旨在跨越屏幕宽度并保持正方形。其中包含一些示例方形DIV（40％x40％）。我正在努力使文本标签在lbl水平方向和垂直方向居中bbl。

我看过（并尝试过）的所有示例都不起作用，因为它们要求我知道标签的高度，或者它们使用了受浏览器限制的table- layout技巧。我需要按照小提琴使用所有相对大小来执行此操作。

有人可以协助吗？我需要使用纯CSS（无JS）解决方案在所有浏览器上工作。我很惊讶，垂直对齐div中的文本似乎非常棘手。我不在乎我们是否使用block或inline元素作为文本标签。

请注意，我不是在寻找TABLE解决方案，这是DIV和CSS难题，需要有效的jsFiddle。

更多：非常 感谢您的回答，但对于以后的张贴者，请注意（width == padding-bottom）是使我的DIV保持 正方形
的魔力。这是网格布局系统的关键，因此我需要对其进行维护。

更新使用相对大小且没有固定高度的情况非常棘手，但我认为我终于找到了解决该问题的方法（如下）。

阅读 244

2020-05-16

共1个答案

小编典典

我想我终于找到了解决这个问题的答案。问题是，当孩子的大小发生变化且身高不详时，我见过的几乎所有其他解决方案都无法应对。我需要它来完成所有位置都没有固定高度的自适应％设计。

首先，使用全部％设计，您需要一个零高度的包装元素来充当父元素内的定位占位符；

<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? */
}

So nothing special about that except that it has no height which makes this
general problem of centering elements tricky. It needs to be absolutely
positioned so that we can uses positioning coordinates in the child elements
(I think this may require a ‘top’ in IE).

Next, the wrapper which is absolutely positioned to exactly overlay the
parent element and fill it out completely.

.divWrapper
{
     position:absolute;
     top:0px;
     padding-top:50%; /* center the top of child elements vetically */
     padding-bottom:50%;
     height:0px;
}

The padding means that any child elements will start in exactly the middle of
the parent element but this wrapper itself has no height and takes up no
space on the page.

Nothing new yet.

最后，我们要居中的子元素。这里的技巧是让子元素根据其 自身的高度
垂直向上滑动。您不能使用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，就无法在传统上做到这一点。

2020-05-16