[英]How to vertically align text in IE7 without using CSS 'table-cell' property?
I have fixed height divs that contain text in them. 我有固定的高度div,其中包含文本。 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.
我希望文本在div的中间垂直对齐,但问题在于一些文本是单行的,有些文本分成两行。 For IE8, Chrome and Firefox, using
display: table-cell
and vertical-align: middle
provides the solution I need: 对于IE8,Chrome和Firefox,使用
display: table-cell
和vertical-align: middle
提供了我需要的解决方案:
JS Fiddle is here . JS Fiddle就在这里 。 Take the asterisk off the
width: 300px
to see the formatting when the text is on one line. 从星号上取下星号
width: 300px
,查看文本在一行时的格式。
However, IE7 does not support the display: table-cell
property. 但是,IE7不支持
display: table-cell
属性。 The only solutions I have found to this apply only to single lines, and not to text that may be 1 or 2 lines. 我发现的唯一解决方案仅适用于单行,而不适用于可能是1行或2行的文本。 How can I have it display in IE7 as it does in more modern browsers, without the use of any scripts?
如何在IE7中显示它,就像在更现代的浏览器中一样,而不使用任何脚本?
How about an IE7 CSS call putting position:relative
on the div
, and absolute
on the h6
, and keep the code for vertical-align
for modern browsers. 如何将IE7 CSS调用放置
position:relative
对于div
, absolute
位于h6
,并保持代码为现代浏览器的vertical-align
。
http://jsfiddle.net/yap59cn3/ http://jsfiddle.net/yap59cn3/
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
ie7.css ie7.css
div
{
/* Use inheritance, and override only the declarations needed. */
position:relative;
}
h6
{
height:auto; /* override inherited css */
position:absolute;
top:45%;
}
The goal is to make IE7 "presentable" -- no matter what you do, it will never look as pretty as a modern browser. 目标是使IE7“显得” - 无论你做什么,它都不会像现代浏览器那样漂亮。 To me, it's not worth the headache (not even a little).
对我来说,这不值得头痛(甚至不是一点点)。
Personally I've started to (ab)use padding to get vertical aligns. 就个人而言,我已经开始(ab)使用填充来获得垂直对齐。 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. 注意:此解决方案仅在您事先知道
<h6>
中将包含哪些文本时才有效。 If you dynamically add it, I'd suggest wordcounting to try to figure out if it's gonna wrap or not. 如果你动态添加它,我建议使用wordcounting试图弄清楚它是否会换行。
Solution: 解:
HTML 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 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/ 小提琴: 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>
You should be able to accomplish this with line-height
and vertical-align: middle;
你应该能够用
line-height
和vertical-align: middle;
完成这个vertical-align: middle;
. 。
div {
background-color: yellow;
height: 30px;
line-height: 30px;
width: 200px;
*width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
vertical-align: middle;
}
You can use a helper span element to vertical align your text like the following example: 您可以使用辅助span元素垂直对齐文本,如下例所示:
html HTML
<div class="container">
<span class="aligner"></span>
<h3>Text to be aligned center in the beloved ie7</h3>
</div>
css CSS
div.container {
background-color: #000;
color: #fff;
height: 300px;
width: 250px;
position:relative;
margin:12px auto;
text-align:center;
}
.aligner {
display: inline-block;
height: 100%;
content: ' ';
margin-right: -0.25em;
vertical-align: middle;
}
h3 {
display: inline-block;
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/groumisg/dbx4rr0f/ 小提琴: http : //jsfiddle.net/groumisg/dbx4rr0f/
Normally, we would use a pseudo element for this, but ie7 (what a surprise!) does not support :after, :before...etc. 通常情况下,我们会使用伪元素,但ie7(多么令人惊讶!)不支持:after,:before ... etc。 Also, note that ie7 does not support display: inline-block for elements that are not inline by default, like div.
另请注意,ie7不支持display:inline-block,用于默认不内联的元素,如div。 To use display: inline-block for a div you would have to use the following hack:
要使用display:inline-block for div,你必须使用以下hack:
div {
display: inline-block;
*display: inline;
zoom: 1;
}
as suggested here Inline block doesn't work in internet explorer 7, 6 正如此处所建议的那样内联块在Internet Explorer 7,6中不起作用
check this out 看一下这个
http://jsfiddle.net/CnmKN/59/ http://jsfiddle.net/CnmKN/59/
CSS Code CSS代码
div {
background-color: yellow;
height: 30px;
width: 200px;
*width: 300px;
display:table;
}
h6 {
font-size: 12px;
line-height: 1em;
display: table-cell;
vertical-align: middle;
height:90px;
}
I know two other methods to vertically center elements than with table-cell: 我知道垂直居中元素的两种方法比使用table-cell更方便:
1) With line-height: 1)线高:
.element {
height: 60px;
line-height: 60px
}
This will only work if the text is in a single line. 这仅在文本在一行中时才有效。
2) position absolute/margin auto 2)位置绝对/保证金自动
.parentElement {
position: relative;
}
.element {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
You maybe will have to use height (auto or a value) and display inline/inline-block. 您可能必须使用高度(自动或值)并显示内联/内联块。 Just try.
试一试。
Key point is not to use pixels for alignment, use only %-s. 关键是不要使用像素进行对齐,只使用%-s。 Works even on IE5 :)
即使在IE5上工作 :)
.wrapper{ position: relative; width: 100%; height: 200px; /* change this value to see alignment*/ background-color: red; margin: 0 auto; } .cell{ position: absolute; display:block; background-color: blue; left:50%; top:50%; /*this puches element half down*/ margin-left:-100px; /* this is the half size of cell width:200px;*/ margin-top: -.5em; /*this is the half size of font size*/ width: 200px; color: #fff; text-align:center; }
<div class='wrapper'> <div class='cell'>vertically aligned text</div> </div>
div {
background-color: yellow;
height: 400px;
width: 200px;
display: table-cell;
vertical-align: middle;
width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.