Question

好的，我有一个居中的div：

<div id="spry">
<p> hello there asdsdfasd  adsfasdf aasdfasfd </p>
</div>

使用这个CSS：

#spry {
background-color: red; 
display: block; 
margin-left: auto; 
margin-right: auto; 
width: 400px; 
}

但我希望div不是固定的宽度。我想我可以改变width: 400px; 到width: auto;

但如果你这样做，它只会扩展到整个宽度。

Answer 1

您可以将显示值更改为inline-block，然后在其父容器上使用text-align: center;（但因为它没有我只使用<body>作为示例）：

body {
    text-align: center; 
}

#spry {
    background-color: red; 
    display: inline-block;
}

Answer 2

你可以使用max-width - 这基本上说不要超过400像素，但你可以更小。尝试调整窗口大小。

如果您不希望固定宽度，这是一个不错的选择。或者，您可以尝试一个百分比，然后使用max-width来定义您想要的最大宽度。

您可以在调整大小时看到显示的宽度，以演示

Answer 3

尝试margin:0 auto;看看会发生什么