将元素内的文字垂直对齐百分比高度？

由于我有一个百分比高度的元素，我不能使用行高度破解。有没有人有任何想法如何解决这个问题？将元素内的文字垂直对齐百分比高度？

<div height="100%"> 
    I want to be vertically aligned in the middle 
</div>

来源

2009-06-29 ChrisInCambo

的多么可笑CSS是 – 2013-01-04 23:04:11

这里有你想要的东西：http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

来源

2009-06-29 09:07:32

必须设置div的高度值，然后设置的line-height：value_of_div_height。行高100％将不起作用，因为它会占用文本的值，而不是div元素。它的工作原理有或没有垂直对齐，只要高度=行高

div { 
    height: 200px; 
    line-height: 200px; 
    display: block; 
}

的另一种方法，如果你想用一个div元素中一个段落做：http://www.w3.org/Style/Examples/007/center

DIV.container { 
    min-height: 10em; 
    display: table-cell; 
    vertical-align: middle } 
... 
<DIV class="container"> 
    <P>This small paragraph... 
</DIV>

来源

2011-09-05 10:13:56 lnguyen55

这就是为什么他极有可能不希望的line-height黑客，因为它依赖于一个固定的高度了光辉的榜样。容器高度％年龄允许响应式设计。 – tjmoore 2015-11-26 15:52:12

如果设置字体大小，并且您知道您拥有的文本行数。您可以将文本包装在一个范围内。并在span上使用以下CSS。

span { 
    font-size:20px; 
    margin-top:-10px; //half the font-size (or (font-size*number of lines)/2) 
    position: relative; 
    top: 50%; 
}

来源

2013-01-05 02:13:12

将元素内的文字垂直对齐百分比高度？

回答

相关问题