如何使内联 <div> 居中答案

【问题标题】：How to center an inline <div>如何使内联 <div> 居中
【发布时间】：2014-04-11 08:47:50
【问题描述】：

我有一个 <div> 和 display: inline; 属性，我想将它居中。

如果我设置 margin: 0 auto 不显示但我需要显示不要像块一样占用所有空间。

HTML

<div id="login1">
<fieldset id="login2">
    <form method="post" action="register.php">
        <label>Nombre: </label>
        <input type="text" name="nombre" placeholder="Nombre de usuario"><br>
        <label>Password:</label>
        <input type="password" name="password" placeholder="Password"><br>
        <input type="submit" value="LogIn">
        <input type="reset" value="Reset">
    </form>
</fieldset>
</div>

CSS

#login1 {
    display: inline-block;
    text-align: center;
}

我想将所有<div>居中

有什么想法吗？

【问题讨论】：

标签： html css layout centering

【解决方案1】：

将text-align: center 放在容器上（包含您的 div 的元素）。

你的 div 应该居中。

【讨论】：

我必须把容器放在哪里？
对于容器，他指的是 #login1 元素周围的任何东西。
@Ninjacu 容器是您的 div 所在的元素（在您发布的 HTML 中不可见，因此我无法真正向您展示）。它肯定包含在某种元素中。
@Ninjacu 不，您不必这样做。您查看您的 HTML。找到您的#login1 div。并检查它周围的元素。可以是body，也可以是不同的div，或者别的什么，我没看到。
@Ninjacu 然后将适当的容器（div 或其他任何符合语义的容器）添加到您的代码中。哦，我还想说，fieldset 应该在form 中，反之则不然。