Question

我想将div放在页面中间，让div适合内容。我怎么能这样做？

我试过

width: 1px;
white-space: nowrap;
margin: 0 auto;

以div为中心，但所有文本都在右侧。

display: inline-block使div符合内容，但margin: 0 auto;似乎不起作用......

Answer 1

这是否适合您：http://vidasp.net/tinydemos/inline-centered-div.html

body { text-align:center; }
div { display:inline-block; }

Answer 2

通常情况下，如果要将某些文本居中，则可以使用一个容器，该容器跨越您居中的容器并设置text-align: center;。

CSS：

#container {
    text-align: center;
}

HTML：我的文字

如果您想要一个围绕文字大小的容器，出于颜色背景或边框的目的，请粘贴在另一个内部容器中。

CSS：

#container {
    text-align: center;
}

#inner_div {
    display: inline;
    /*other styles here*/
}

HTML：

<div id="container">
    <div id="inner_div">my text</div>
</div>

Answer 3

因此，您有两个选择。如果您实际上并不需要div来适合内容，而只希望内容居中而不必指定div的宽度，则只需执行以下操作：

<div style="display: flex; justify-content: center;">
    <input type="button" value="Example Button" />
</div>

但是，如果您实际上要做要在内容周围使用div（例如使边框看起来很漂亮），则可以简单地使用两个div，而不是：

<div style="display: flex; justify-content: center;">
    <div style="display: inline-block;">
        <input type="button" value="Example Button" />
    </div>
</div>

外部div将填充父级的空间，内部div将包装其内容（在本例中为按钮），并且按钮和内部div将居中。

Answer 4

由于宽度：1px，文本在右侧。设置更大的宽度。

Answer 5

除此之外，解决javascript解决方案的唯一方法是给它一个宽度并将其左右边距设置为auto：

<div style="margin-left:auto;margin-right:auto;width=80%">...</div>

所有其他解决方案都会弄乱你的内心文本。

Answer 6

尝试display: table;

div { 
    display: table; 
    margin: 0 auto;
}

Answer 7

Flexbox应该可以解决问题：

.container {
        display: flex;
}

.centeredDiv {
        display: inline-block;
        margin: 0 auto;
}

中心div和fit内容？

7 个答案: