css - How to horizontally centre a non-fixed width div?

Question

OK, I have a div that is in the centred:

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

Uses this CSS:

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

But I want to have the div not a fixed width. I figured I could just change width: 400px; to width: auto;

But if you do that it just expands to the whole width.

score 2 · Accepted Answer

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

body {
    text-align: center; 
}

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

score 1 · Accepted Answer

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

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

您可以看到调整大小时显示的宽度只是为了演示

score -1 · Accepted Answer

-1

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

于 2013-08-22T11:58:49.513 回答

3 回答 3