当前位置： 文江博客 话题详情

垂直居中几乎适用于所有浏览器，但不适用于 IE7

发布于 2024-11-07 05:54:22 字数 2793 浏览 0 评论 0 原文

这实际上是关于我的简单页面（有一天将被真实内容替换）、用于垂直居中的 HTML+CSS 样板和 IE7 的两部分问题。

http://engitize.net/

  1. 任何人都可以提供详细解释为什么页面在非 IE 中正确显示浏览器（Chrome、Fx、Opera），几乎所有半新到最近的 IE（IE5.5、IE6、IE8、IE9），但 IE7 中没有？

    我特别感兴趣的是：它在 IE6 中有效，但在 IE7 中不起作用，因为......某种解释。

  2. 应该更改什么才能使 div#c 在 IE7 中正确垂直居中？
    我使用 div#c 的特定高度，但使用的样板与高度无关，修复应该保留此功能。

    不能破坏其他浏览器，除非是 IE5.5（好吧，IE6 也可以，但前提是确实不可避免）。

    更改 并将 IE 转为怪异模式也不被接受（对于新开发的页面来说这是一个非常糟糕的做法）。

如果你没有 IE7（就像我一样），你可以访问 http://ipinfo.info/netrenderer/ 或 http://browserling.com/，粘贴 URL 并选择 IE7 自行查看问题。

因为页面在接受某些答案后会发生变化，所以我提供了相关 HTML 和 CSS 部分的快照（徽标 URL 更改为绝对 URL）。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } 
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style> 
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div> 
because history is important!
</div></div></div></div> 
<div id="footer"><div> 
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p> 
<p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p> 
</div></div>
</body>
</html>
原文

It's actually two part question regarding my simple page (that will be replaced some day with real content), HTML+CSS boilerplate used there for vertical centering and IE7.

http://engitize.net/

  1. Can anyone provide detailed explanation why the page is displayed correctly in non-IE browsers (Chrome, Fx, Opera), almost all semi-recent to recent IEs (IE5.5, IE6, IE8, IE9), but not in IE7?

    I am especially interested in: it works in IE6, yet it doesn't work in IE7, because... kind of explanation.

  2. What should be changed to make div#c properly centered vertically in IE7?
    I am using specific height for div#c, but used boilerplate is height-agnostic and fix should preserve this feature.

    Spoiling other browsers is not an option, unless it's IE5.5 (ok, IE6 too, but only if it is really unavoidable).

    Changing <!DOCTYPE html> and turning IEs into quirks mode is also not accepted (and it's a pretty bad practice for newly developed pages).

If you don't have IE7 (just as I), you can visit http://ipinfo.info/netrenderer/ or http://browserling.com/, paste URL there and choose IE7 to see the problem yourself.

Because the page will change after accepting some answer, I'm providing snapshot of relevant HTML and CSS parts from it (with logo URL changed to be absolute).

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } 
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style> 
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div> 
because history is important!
</div></div></div></div> 
<div id="footer"><div> 
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p> 
<p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p> 
</div></div>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

银河中√捞星星 2024-11-14 05:54:22

您的 Q#1 已 @thirtydot回答，IE7及以下版本不支持CSS表属性，因此必须为它们找到另一种方法。他的绝对定位技术通常是执行此操作的首选方法，因为大多数时候在这样的场景（启动页面？）中居中内容的宽度和高度是已知的。

上述每条评论的附录：
为了回答为什么它在 IE6 中工作而不是在 IE7 中工作，即使 IE6 也不支持表属性，IE7 实际上是从 #middle[id 中获取 position: static 规则] {} 规则 - IE7 确实理解这种类型的选择器，因此这意味着后来的绝对/相对定位的工作方式与 IE6 中的工作方式不同

考虑到上述内容，重做 CSS 以确保 IE7 和 6 得到相同的CSS，并且稍后将其放置在级联中以覆盖“好”CSS，事实证明定位方法也是与高度无关的，在评论中有各种链接可以测试它，但这是最终的工作版本：

混合表格单元格/定位方法：此处

该小提琴确实包含图像宽度和高度，但如果您删除它们，并且“子文本”的定位确实（或应该）表明中间的任何内容都保持居中

HTML 使用的内容与此答案的底部相同..减去额外的元素

CSS：

html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000;  }

#outer {
    position: relative;
    width: 100%;
    height: 100%;
    display: table;
}

#middle { 
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}

#c {
    width: 385px;
    height: 120px;
    margin: 0 auto;
    background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}

/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
  *position: absolute;
  *top: 50%;
  *width: 100%;
  *text-align: center;
  }

#c {
  *position: relative;
  *top: -50%;
}

/**** end IE7 and below rules ****/


#c div {
    position: relative;
    top: 100px;
    width: 100%;
    color: #666;
    font-weight: bold;
    font-family: serif;
    font-size: 12px;
    text-align: right;
}

#footer {
    width: 100%;
    text-align: center;
    height: 15px;
    padding: 5px 0 0 0;
    margin: -20px auto 0 auto;
    border: 0;
    background-color: #def;
}
#footer div {
    padding: 0px 5px 0px 5px;
    text-align: right; font-size: 10px;
    font-family: sans-serif;
}
#footer p {margin: 0;}

正如注释中所指出的，使用HTML5样板用于对HTML进行分类的技术有条件的元素参见：

条件样式表与 CSS hack？
答案：都不是！

意味着您可以将 IE7 黑客替换为：

.ie6 #middle, .ie7 #middle {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}

.ie6 #c, .ie7 #c {
  position: relative;
  top: -50%;
}

原始替代方案 - “火柴棒技术”

您可能可以通过条件注释或黑客将以下技术与“表格单元格”技术混合，但这（黑客！ ）技术在我的测试中可以跨浏览器工作正如

您要求的高度不可知版本..您可能喜欢也可能不喜欢“火柴棒”技术，这涉及使用内联块并将它们排列起来..“火柴棒” " 是一个 100% 高空、离页、内联块元素，一旦就位，其垂直对齐设置为“中间”，下一个内联块（您的实际内容 div）位于其旁边并与中间或它对齐，然后使用 text-align: center; ，您也可以水平居中，

这里有一个工作 示例小提琴

注意：我已将宽度保持不变，但您可以通过删除高度和高度来测试没有宽度/高度的情况。 width off #c 并删除 #c div 文本 div 的 CSS - 在纯文本场景中，在这些 div 中输入文本应“自动”居中。

特别注意在外部 div 内部插入额外的 HTML（这可能就是为什么这不是首选方法！），这是“火柴棒”支持整个页面打开。

小提琴中使用的代码：

html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }

#outer { position: relative; width: 100%; height: 100%;}

/* a matchstick spacer */
#outer i {
 display: inline-block; 
 height: 100%; 
 width: 1px; 
 margin-left: -1px; /* to hide off page */
 margin-right: -4px; /* to remove spacing between this and #middle block */
 vertical-align: middle; /* will make inline block next to it center vertically */
 background: #f00; /* red, not required just to see or not see it */
 }

#middle { 
  display: inline-block;
  width: 100%;
  text-align: center;
  vertical-align: middle;
} 

/* image 385 * 120 */
#c { 
  display: inline-block;
  /* presuming image heights, but it wouldn't matter if there was width/height here or not */
  width: 385px; 
  height: 120px; 
  background: url(http://engitize.net/engitize.png) no-repeat 50% 50%; 
}

#middle, #c { /* IE hack for inline block on block level elements */
 *display: inline; 
}


#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }

#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } 
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }

a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }

HTML：

<div id="outer">
  <i></i>
  <div id="middle">
      <div id="c"><div>
        because history is important!
      </div></div>
  </div>
</div>

<div id="footer">
  <div>
   <p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
   <p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p>
  </div>
</div>

your Q#1 has been answered by @thirtydot, IE7 and below does not support the CSS table properties so another way has to be found for them. and his absolute positioning technique is usually the preferred way to do this as most times in a scenario like this (splash page?) the width and height of the centred content would be known.

addendum to above per comments:
In answer to why it was working in IE6 and not IE7 even though IE6 doesn't support the table properties either, IE7 was actually picking up the position: static rule from the #middle[id] {} rule - IE7 does understand this type of selector so this means the later absolute/relative positioning was not working the same as it was in IE6

Taking the above into account redoing the CSS to make sure IE7 and 6 got the same CSS and that it was placed later in cascade to override the "good" CSS it turns out the the positioning method is height agnostic too, in the comments there are various links to to test this, but here is the final working version:

Hybrid table cell/positioning method : here

That fiddle does include the image width and heights, but if you remove them and the positioning for the "sub text" it does (or should) show that whatever is in the middle does stay centered

HTML used is the same as the bottom of this answer.. minus the extra <i></i> element

CSS:

html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000;  }

#outer {
    position: relative;
    width: 100%;
    height: 100%;
    display: table;
}

#middle { 
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}

#c {
    width: 385px;
    height: 120px;
    margin: 0 auto;
    background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}

/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
  *position: absolute;
  *top: 50%;
  *width: 100%;
  *text-align: center;
  }

#c {
  *position: relative;
  *top: -50%;
}

/**** end IE7 and below rules ****/


#c div {
    position: relative;
    top: 100px;
    width: 100%;
    color: #666;
    font-weight: bold;
    font-family: serif;
    font-size: 12px;
    text-align: right;
}

#footer {
    width: 100%;
    text-align: center;
    height: 15px;
    padding: 5px 0 0 0;
    margin: -20px auto 0 auto;
    border: 0;
    background-color: #def;
}
#footer div {
    padding: 0px 5px 0px 5px;
    text-align: right; font-size: 10px;
    font-family: sans-serif;
}
#footer p {margin: 0;}

As pointed out in comments using the technique that the HTML5 boilerplate uses to class the HTML element conditionally see:

Conditional stylesheets vs CSS hacks?
Answer: Neither!

means you could replace the IE7 hacks with:

.ie6 #middle, .ie7 #middle {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}

.ie6 #c, .ie7 #c {
  position: relative;
  top: -50%;
}

Original alternative - "Matchstick Technique"

You could likely mix the following technique with the "table-cell" technique via conditional comments or hacks, but this (hacky!) technique works across browser as far as my tests have seen

As you've asked for a height agnostic version.. you might or might not like the "matchstick" technique, this involves using inline blocks and lining them up.. the "matchstick" is a 100% high empty, off page, inline-block element with its vertical-alignment set to "middle" once it's in place the next inline-block (your actual content div) sits beside it and aligns to the middle or it, then using text-align: center; on it you have the horizontal centering too

here's a link to a working example fiddle

Note: I've left your widths intact, but you can test without widths/heights by removing the height & width off #c and also remove the CSS for the #c div text div - in a plain text scenario entering text into either of these divs should 'auto' centre.

and especially note the insertion of the extra <i></i> HTML just inside the outer div (that's likely why this is not a preferred method!), this is the "matchstick" that props the whole page open.

Code used in fiddle:

html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }

#outer { position: relative; width: 100%; height: 100%;}

/* a matchstick spacer */
#outer i {
 display: inline-block; 
 height: 100%; 
 width: 1px; 
 margin-left: -1px; /* to hide off page */
 margin-right: -4px; /* to remove spacing between this and #middle block */
 vertical-align: middle; /* will make inline block next to it center vertically */
 background: #f00; /* red, not required just to see or not see it */
 }

#middle { 
  display: inline-block;
  width: 100%;
  text-align: center;
  vertical-align: middle;
} 

/* image 385 * 120 */
#c { 
  display: inline-block;
  /* presuming image heights, but it wouldn't matter if there was width/height here or not */
  width: 385px; 
  height: 120px; 
  background: url(http://engitize.net/engitize.png) no-repeat 50% 50%; 
}

#middle, #c { /* IE hack for inline block on block level elements */
 *display: inline; 
}


#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }

#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } 
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }

a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }

HTML:

<div id="outer">
  <i></i>
  <div id="middle">
      <div id="c"><div>
        because history is important!
      </div></div>
  </div>
</div>

<div id="footer">
  <div>
   <p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
   <p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p>
  </div>
</div>
回复 原文
善良天后 2024-11-14 05:54:22

IE7 不支持 display: table-cell，您可以使用用作垂直居中技术的一部分。

你的页面比较简单，所以我简化了很多 HTML/CSS。现在，在我测试过的所有地方，居中功能都可以正常工作。

完整代码： http://jsbin.com/azuhe4

IE7 does not support display: table-cell, which you're using as part of your vertical centering technique.

Your page was relatively simple, so I simplified the HTML/CSS a lot. The centering now works properly everywhere I've tested it.

Complete code: http://jsbin.com/azuhe4

回复 原文
梦里梦着梦中梦 2024-11-14 05:54:22

导致此行为的行是......

position: static

“#middle”CSS 规范。

如果我禁用该行，IE7 似乎会（或多或少）在页面中间呈现徽标。

The line that's causing this behavior is...

position: static

...on the "#middle" CSS spec.

If I disable that line IE7 seems to render (more or less) the logo in the middle of the page.

回复 原文
像你 2024-11-14 05:54:22

这是。

IE6和IE6 7 对此有点不稳定（无论如何，这就是我读到的）。

如果执行以下操作，您将看到代码出现问题（无需编辑，除了几个边框以查看发生的情况）。

这就是我所做的：

  1. 删除你的
  2. 添加到你的 DIV {} CSS 行 - border:1px dotted grey
  3. 在你的“outer”，“middle”，和“c”div，a 抛出一个内联边框颜色只是为了看看哪个是哪个。
  4. 点击“刷新”

，然后粘贴 ，然后再次点击“刷新”。对我来说看起来不错。垂直居中、水平居中。

截至 2011 年 4 月 20 日，W3C 声明 “不是标准”。当然，IE6/7 不知道该标签的含义。 http://www.w3.org/QA/2002/04 /valid-dtd-list.html

It's the <!DOCTYPE>.

IE6 & 7 were a little flaky with that (that's what I've read, anyway).

If you do the following, you'll see things come around - with your code (no edits, save for a couple borders to see what's happening).

Here's what I did:

  1. Deleted your <!DOCTYPE>
  2. Added to your DIV {} CSS line - border:1px dotted gray
  3. At your "outer", "middle", and "c" divs, a threw an inline border-color just to see which was which.
  4. Hit Refresh

Then pasted <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and hit Refresh again. Looked fine to me. Centered vertically, horizontally.

As of April 20, 2011 W3C states <!DOCTYPE HTML> as "Not a Standard". Certainly, IE6/7 have no idea what that tag means. http://www.w3.org/QA/2002/04/valid-dtd-list.html

回复 原文
美羊羊 2024-11-14 05:54:22

我为此找到了新的且简单的解决方案：

<style>

    .vam{vertical-align:middle;}

</style>

<div style="line-height:200px; border:1px solid #000000; height:200px; 
text-align:center;color:#FFFFFF; font-size:1px;">

    .<img src="her-banner.jpg" alt="" class="vam" />

</div>

I got new and easy solution for that:

<style>

    .vam{vertical-align:middle;}

</style>

<div style="line-height:200px; border:1px solid #000000; height:200px; 
text-align:center;color:#FFFFFF; font-size:1px;">

    .<img src="her-banner.jpg" alt="" class="vam" />

</div>
回复 原文
~没有更多了~

关于作者

梦初启

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文