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的背景颜色来清楚地看到这一点）。

表方法仍然优越，还是有办法只使用CSS？

更新：

根据要求，这是一个说明问题的例子：

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

第一个＆＃34;表格方法＆＃34;按预期工作。第二个边距：0自动＆＃39;方法并不真正起作用，div不会收缩内容。内容溢出到右边。

Answer 1

我明白你的意思，但有很多方法，从长远来看，使用CSS作为风格更有利，因为以后更容易改变等等，

要解决内容超出div的问题，可以使用auto属性作为宽度和高度，

像这样：

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

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

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

您可能还希望在特定div中添加ID或类，因此在这种情况下，您可以更清楚地为该特定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，以便预览和播放

使用css等效于表方法的中心div

2 个答案: