文本如何在div内垂直居中对齐

最后发布: 2013-10-21 02:56:03


问题

我知道在知道文本高度时如何在div中垂直对齐文本中心。 假设文字的高度为20像素。

用跨度换行。 样式div和跨度。

div {
     position: relative;
}
span {
    display: block
    position: absolute;
    top: 50%;
    height: 20px;
    margin-top: -10px;
}

现在,我想以响应方式对齐文本。 我想要的是文本的字体大小与正文的高度成比例。 说我有以下风格:

body {
    font-size: 100%;
}
span {
    font-size: 1.5em;
}

然后,当窗口大小更改时,我将更改主体的字体大小。 在这种情况下,无法确定文本的高度。 那么如何使文本中间垂直对齐呢?

我知道我可以使用JavaScript动态更改跨度的高度和边距顶部。 但是我必须在更改窗口大小后执行此操作。 然后可能会改变窗口的大小,然后用户看到文本不在中间,然后执行JS代码,文本跳到div的中间。 这可能不是可接受的解决方案。

我想知道是否有一个纯CSS解决方案。

我想我可以使用以下样式垂直对齐文本中心。

div {
    display: table-cell;
    vertical-align: middle;
}

但是,使用此解决方案后,div的边距无法正确呈现。 而且语义不正确。

那么有没有完美的解决方案?

javascript html css vertical-alignment
回答

另一个没有表显示属性的纯CSS( CSS3 )解决方案是使用transform:translateY()属性。

您需要一个容器div和文本的内部范围:

的HTML

<div id="container">
    <span>Your Text</span>
</div>

的CSS

#container{
    position: relative;
}

#container span{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

    /* Your font-size CSS */
}

JsFiddle示例: https ://jsfiddle.net/a0m4xnex/1/

您也可以对translateX使用相同的策略进行水平居中。


回答

Helper Div可以帮助您垂直对齐div

最适合我,您可以相应地进行更改

 .DivParent { height: 100px; border: 1px solid lime; white-space: nowrap; } .verticallyAlignedDiv { display: inline-block; vertical-align: middle; white-space: normal; } .DivHelper { display: inline-block; vertical-align: middle; height:100%; } 
 <div class="DivParent"> <div class="verticallyAlignedDiv"> <p>Isnt it good!</p> </div><div class="DivHelper"></div> </div> 


回答

使用flex box ,您可以执行以下操作: JSBIN

本质上,这是代码(请记住在需要时添加前缀):

 html, body { height: 100%; margin: 0px; } body { display: flex; justify-content: center; /* horizontal centering */ } div { align-self: center; /* vertical centering */ } 
 <body> <div>Centered</div> </body>