Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
454 views
in Technique[技术] by (71.8m points)

html - IE7 vertically align middle - not working

Please find below the link,

http://jsfiddle.net/anglimass/Y8AvM/

I just wanna my div come's vertically align middle ie7 also.

Can anybody help?

Thanks


Sorry guys,

I find out one good solution Please see below the link,

http://jsfiddle.net/anglimass/ct4tx/

Thanks,

Ref:http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

It's not working in IE7 because IE7 does not support display: table-cell.

I've even told you this before.

Here's an alternative vertical centering technique that does work in IE7: How to vertically align an image inside div

Here's the simplest version of the technique from the above answer applied to your code: http://jsfiddle.net/thirtydot/Y8AvM/1/

HTML:

<div class="inlay">
    <span class="helper"></span><img src="http://goldstudios.net/uploader/uploads/Wildebeest_$1$2ryes3hf$Fl0tEsFaORwBW2seye9qN0.jpg" />
</div>?

CSS:

html, body {
    height: 100%;
    background: #ddd;
}
.inlay {
    height: 100%;
    text-align: center;
}

.inlay img {
    vertical-align: middle;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

It works in all modern browsers, and of course, IE7.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...