Question

对我来说，table s最有用的功能之一是它们的宽度会根据其内容进行调整。

您可以轻松地执行以下操作：

<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>

如果该框的内容较宽，则框会更宽。非常直观，适用于所有浏览器，期间。

您可以使用float CSS属性为普通块元素执行类似的操作，即宽度调整为其内容。但元素不会居中。

所以，问题是：如何将块元素居中并使该元素以跨浏览器的方式调整其宽度？

Answer 1

如果您打算在页面中间只显示一些文字，可以使用以下内容：

<div style="text-align:center;">
    <div style="background:red;display:inline;">
        Hello World!
    </div>
</div>

第一个块将内容与中间对齐。第二个将填充等于其内容的高度，因为display:inline将强制<div/>块像<span/>一样行为，即。将其宽度调整为内容，而不是剩余的空间。

请注意，这仅限于单行文字（例如“此处的某些文字”）。

Answer 2

CSS: The Definitive Guide

引用Eric Meyer

如果两个边距都设置为自动，如下面的代码所示，则将它们设置为相等的长度，从而将元素置于其父元素中：
p {width: 100px; margin-left: auto; margin-right: auto;}
将两个边距设置为相等的长度是使元素居中的正确方法，而不是使用text-align。（text-align仅适用于块级元素的内联内容，因此将元素设置为具有中心的文本对齐不应使其居中。）

实际上，只有1999年2月之后发布的浏览器才能正确处理自动边距居中，而且并非所有浏览器都完全正确。那些不能正确处理自动边距的人会以不一致的方式行事，但最安全的选择是假设过时的浏览器会将两个边距重置为零。

然而，

IE / Win中通过IE6获得的一个更有害的错误是，它实际上确实将text-align：center视为元素，并且中心元素和文本。这在IE6及更高版本的标准模式下不会发生，但它在IE5.x及更早版本中仍然存在。

Answer 3

现代的方法是指定display:table，IE的解决方法是在inline/inline-block上有一个父元素和text-align：center：

<div id="for-ie">
<div id="el">whatup son</div>
</div>

<style>
#el { 
display:table;
margin:0 auto;
}

/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el { 
zoom:1;
display:inline;
}
</style>

Demo

以下是我就此主题撰写的快速教程：http://work.arounds.org/centering-block-level-element-variable-width/

当我不困时，我会把它拉长。

Answer 4

使用此CSS

#content {
  position: absolute;
  width: 150px;
  margin-left: -75px;
  left: 50%;
  border: 1px solid #000;
  text-align: center;
  padding: 20px;
}

和这个HTML ＆lt; div id =“content”＆gt; 这里有一些文字＆LT; / DIV＆GT;

Answer 5

好吧，莫莉小姐！这些答案实在太复杂了。

CSS：

div.centered {
 width:100%;
 margin:0 auto;
 text-align:center;
}

div.centered span {
 padding:20px;
 border:1px solid #000;
}

然后在你体内使用它：

<div class="centered"><span>Hello world!</span></div>

如何在没有表的情况下实现表的居中功能

5 个答案: