将 div 居中并适合内容？ [重复]

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：

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

如果您想要一个大小围绕文本大小的容器，用于彩色背景或边框，请插入另一个内部容器。

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

尝试

display: table;

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

Answer 5

Flexbox 应该可以解决问题：

.container {
        display: flex;
}

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

Answer 6

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

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

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

Answer 7

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