中心 div 使用 css 等效于 table 方法

Question

下表方法正确居中 div 并且 div 的大小与内容的大小匹配：

<table>
<tbody>
<tr>
<td width='50%'></td>
<td>

<div>
<input type='text' name='linksearch' size='40'/>
<a href=''>Search</a>
</div>

</td>
<td width='50%'></td>
</tr>
</tbody>
</table>

仅使用 div 元素的等效 CSS 是什么？我看到很多答案，例如：

div.center {
    margin-left: auto;
    margin-right: auto;
}

但是当使用这种方法时，我不清楚如何使 div 的宽度增大或缩小以匹配 div 的内容。我可以指定一个明确的宽度，但即便如此，内容也会向右溢出，因此它不是真正居中的（您可以通过设置 div 的背景颜色清楚地看到这一点）。

那么 table 方法是否仍然更好，或者有没有办法只使用 CSS 来做到这一点？

更新：

根据要求，下面是一个说明问题的示例：

http://jsfiddle.net/qn0txere/3/

第一个“表格方法”按预期工作。第二个 'margin: 0 auto' 方法并没有真正起作用，因为 div 不会收缩内容。内容向右溢出。

Answer 1

我明白你的意思，但是有一些方法可以解决这个问题，从长远来看，使用 CSS 作为样式更有益，因为以后更容易更改等等，

要解决内容超出 div 的问题，您可以使用 auto 属性来设置宽度和高度，

像这样：

div.center {
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

如果 div 中没有大量内容（或 max 属性），您可能还希望添加 min-width 和 min-height 属性，以使其看起来更有吸引力：

min-width: 300px;
min-height: 500px;
max-width: 500px;
max-height: 600px;

您可能还希望将 ID 或类添加到特定 div，因此在这种情况下，您可以更清楚地为特定 div 编写 CSS

Answer 2

您必须添加一个包含 div（首选）或向正文添加属性。由于您的标记无论如何都是错误的，我将通过添加 FORM 元素来选择首选方法：

<div class="center">
    <form>
    <input size="40" name="linksearch" type="text"/>
    <a href="#"> Search </a>
    </form>
</div>

现在，由于我有我需要的元素，我可以居中并让它们按我的意愿工作，因为我有机会为所有元素添加定位（+ 适当的标记）：

.center {
    text-align:center
}
form {
    white-space: nowrap;
    padding: 10px;
    margin:0 auto;
    width: auto;
    background-color: #cc0;
    display:inline-block
}

真的很简单，对吧？你可以看到update to your fiddle，这样你就可以预览和玩耍了