如何在IE7中垂直对齐文本而不使用CSS'table-cell'属性？ [英] How to vertically align text in IE7 without using CSS 'table-cell' property?

问题描述

我有固定的高度div，其中包含文本。我希望文本在div的中间垂直对齐，但问题在于一些文本是单行的，有些分割本身在两行。对于IE8，Chrome和Firefox，使用 display：table-cell 和 vertical-align：middle ：

JS Fiddle在这里。当 width：300px 以星号显示格式时，文本在一行上。

IE7不支持 display：table-cell 属性。我发现这里的唯一解决方案只适用于单行，而不是文本可能是1或2行。

解决方案

我个人的我've开始（ab）使用填充来获得垂直对齐。如果您使用固定高度，这是特别方便，因为您可以使用填充值来抵消高度，以获得完美的全高度元素。

注意：此解决方案如果您知道事先在< h6> 中会出现什么文本，

解决方案：

$ b如果你动态添加它，我建议使用字词计数来尝试找出是否要换行。 $ b

HTML

< h6 class =OneLineVertCentered>这里是一些文本。看看这个可爱的文字。不是很好吗？< / h6>
< / div>

< div style =margin-top：1em;> <！ - 只用于正确显示框的边距 - >
< h6 class =TwoLineVertCentered>这里是一些文本。看看这< br />
可爱的两行文本。不是很好吗？< / h6>
< / div>

CSS

  div {
 background-color：yellow; 
 height：30px; 
 width：200px; 
 width：300px; 
} 
 
 h6.OneLineVertCentered，
 h6.TwoLineVertCentered {
 font-size：12px; 
 line-height：1em; 
} 
 h6.OneLineVertCentered {
 padding-top：10px; 
} 
 h6.TwoLineVertCentered {
 padding-top：3px; 
} 
  

小提琴：
http://jsfiddle.net/Snorbuckle/CnmKN/

Snippet（same as fiddle）：

  div {background-color：yellow; height：30px; width：200px; width：300px; } h6.OneLineVertCentered，h6.TwoLineVertCentered {font-size：12px; line-height：1em; } h6.OneLineVertCentered {padding-top：10px; } h6.TwoLineVertCentered {padding-top：3px; }  

 < div& < h6 class =OneLineVertCentered>这里是一些文本。看看这个可爱的文字。不是很好吗？< / h6>< / div>< div style =margin-top：1em;> < h6 class =TwoLineVertCentered>这里是一些文本。看看这< br />可爱的两行文本。不是很好吗？< / h6>< / div>  

I have fixed height divs that contain text in them. I would like the text to be vertically aligned in the middle of the div, but the problem lies in the fact that some of the text is single-line, and some splits itself over onto two lines. For IE8, Chrome and Firefox, using display: table-cell and vertical-align: middle provides the solution I need:

JS Fiddle is here. Take the asterisk off the width: 300px to see the formatting when the text is on one line.

However, IE7 does not support the display: table-cell property. The only solutions I have found to this apply only to single lines, and not to text that may be 1 or 2 lines. How can I have it display in IE7 as it does in more modern browsers, without the use of any scripts?

解决方案

Personally I've started to (ab)use padding to get vertical aligns. It's especially handy if you use fixed height, since you can offset the height with the value of the padding to get a perfect full-height element.

Note: This solution only works if you know what text will come in the <h6> in advance. If you dynamically add it, I'd suggest wordcounting to try to figure out if it's gonna wrap or not.

Solution:

HTML

<div>
    <h6 class="OneLineVertCentered">Here is some text. Look at this lovely text. Isn't it nice?</h6>
</div>

<div style="margin-top: 1em;"> <!-- Margin only for displaying the boxes properly -->
    <h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
        lovely two-line text. Isn't it nice?</h6>
</div>

CSS

div {
    background-color: yellow;
    height: 30px;
    width: 200px;
    width: 300px;
}

h6.OneLineVertCentered,
h6.TwoLineVertCentered {
    font-size: 12px;
    line-height: 1em;
}
    h6.OneLineVertCentered {
        padding-top: 10px;
    }
    h6.TwoLineVertCentered {
        padding-top: 3px;
    }

Fiddle: http://jsfiddle.net/Snorbuckle/CnmKN/

Snippet (same as fiddle):

    div {
        background-color: yellow;
        height: 30px;
        width: 200px;
        width: 300px;
    }
    
    h6.OneLineVertCentered,
    h6.TwoLineVertCentered {
        font-size: 12px;
        line-height: 1em;
    }
        h6.OneLineVertCentered {
            padding-top: 10px;
        }
        h6.TwoLineVertCentered {
            padding-top: 3px;
        }

<div>
    <h6 class="OneLineVertCentered">Here is some text.
        Look at this lovely text. Isn't it nice?</h6>
</div>

<div style="margin-top: 1em;">
    <h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
        lovely two-line text. Isn't it nice?</h6>
</div>

这篇关于如何在IE7中垂直对齐文本而不使用CSS'table-cell'属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！