如何垂直对齐文本？ [英] How to vertical align a text?

问题描述

如何垂直对齐浮动div中的文字？例如：我有一个固定高度的动态内容。

感谢

解决方案

div>

表格单元格是最简单的解决方案。

Javascript是另一种选择（测量div的大小和文字大小，然后调整padding或lineheight

CSS

b $ b

  div＃container {
 border：solid 1px; 
 height：300px; 
} 
 
 div＃content {
 border：solid 1px; 
} 
 
 div＃balance {
 border：solid 1px; 
 / *必须是100％* / 
 height：100％; 
} 
 
 div.valign {
 / * firefox 2 * / 
显示：-moz-inline-box; 
 / * everybody else * / 
 display：inline-block; 
 
 vertical-align：middle; 
} 
 
 / * IE 6和7 hack * / 
 html * div.valign {
 display：inline; 
} 
  

HTML

 < div id =container> 
< div id =balanceclass =valign>< / div> 
< div id =contentclass =valign> 
 Blah blah blah blah< br /> 
 Blah blah blah blah< br /> 
 Blah blah blah blah< br /> 
 Blah blah blah blah< br /> 
 Blah blah blah blah 
< / div> 
< / div> 
  

有一段时间，我想这是一个博客文章。 >

How to vertically align the text in a floated div? For example: I have a dynamic content with fixed height. if the content is small or big it has to automatically vertically align.

Thanks

解决方案

Table cells are the easiest solution.

Javascript is an alternative (measure the size and text size of the div, then adjust padding, or lineheight, or whatever).

edit: Or this awesome css:

CSS

div#container {
    border: solid 1px;
    height: 300px;
}

div#content {
    border: solid 1px;
}

div#balance {
    border: solid 1px;
    /* gotta be 100% */
    height: 100%;
}

div.valign {
    /* firefox 2 */
    display: -moz-inline-box;
    /* everybody else */
    display: inline-block;

    vertical-align: middle;
}

/* IE 6 and 7 hack */
html* div.valign {
    display: inline;
}

HTML

<div id="container">
    <div id="balance" class="valign"></div>
    <div id="content" class="valign">
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah
    </div>
</div>

Been meaning to make a blog post about this for a while, I think it's time.

这篇关于如何垂直对齐文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！