12

我最喜欢的仅使用 CSS 使 xhtml 元素居中的方程式如下：

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

在支持它的浏览器中还有更简单的 margin:auto 方法。是否有其他人有巧妙的方法来强制内容在其容器中居中显示？（垂直居中的奖励积分）

编辑 - 哎呀，忘记了左侧边距中的“负”部分。固定的。

4

9 回答 9

12 
div #centered{
 margin: 0 auto;
}

根据我的经验，似乎是最可靠的。

于 2008-09-29T11:05:37.420 回答
6

坚持保证金：0自动；用于水平对齐；如果您还需要垂直对齐，请使用 position: absolute; 最高：50%；边距顶部：-（宽度/ 2）像素；但是请注意，如果您的容器的宽度大于屏幕的宽度，则使用 Position: absolute 方法，它的一部分将在左侧从屏幕上脱落。

于 2008-09-29T11:52:47.463 回答
5

好吧，我不得不说，这似乎是一种巨大的矫枉过正。我倾向于将容器设置text-align:center;为旧浏览器，margin:auto;现代浏览器，然后保持原样。然后在元素中重置文本对齐（如果它包含文本）。

当然，有些东西需要设置为块，宽度需要设置......但是你到底想要什么风格需要这么多的黑客攻击？

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>
于 2008-09-29T11:00:14.157 回答
3

只要您确保 IE 处于标准模式，Margin:auto 就可以在所有浏览器中使用。

它比其他的更挑剔，并且要求您的文档类型是文档中的第一个，这意味着它之前没有空格（空格、制表符或换行符）。

如果你这样做，margin:auto 就是要走的路！:)

于 2008-09-29T11:11:59.467 回答
1

请注意，margin:auto; 仅当浏览器可以计算要居中的项目的宽度和父容器的宽度时，该方法才有效。在许多情况下设置宽度：自动；有效，但在某些情况下无效。

于 2008-09-29T11:17:39.670 回答
1

使用 50% 方法的绝对定位具有严重的副作用，如果浏览器窗口比元素窄，那么某些内容将出现在浏览器的左侧 - 无法滚动到它。

坚持汽车利润——它们要可靠得多。

如果您在标准模式下工作（您应该这样做），那么您可能关心的所有浏览器都支持它们。

如果您确实需要支持 Internet Explorer 5.5 和更早版本，可以使用 text-align hack。

于 2008-09-29T11:35:55.400 回答
1

这是一个方便的 CSS 技巧书签

http://css-discuss.incutio.com/

也包含许多 居中技巧。

于 2008-09-29T11:53:09.337 回答
-1 
body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

这在所有常用的浏览器中都能很好地工作。如前所述margin: 0 auto;，不适用于所有 IE 的半当前版本。

于 2008-09-29T12:37:43.627 回答
-2

试试这个; 不知道它是否在 IE 中工作，但在 Fx 中工作正常。它仅使用 CSS（无 JavaScript）将 DIV 块居中在页面上，没有自动边距，并且 DIV 块中的文本仍然左对齐。我只是想知道垂直居中是否也可以这样工作，但到目前为止还没有成功。

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>
于 2008-09-29T11:37:28.017 回答