html - 将另一口井定位在父容器的中心

Question

在我的 HTML 页面中，我有一口井，其中有一口井。外井应位于页面中央，内井应位于外井的中央。我的代码如下:

        <div id="container">
            <div class="col-md-10"></div>
            <div class="well col-md-10">
                <p> Office name <span class="right-float">Your desk: <span id="desk-id">not set</span> </span></p>
                <hr>
                <div class="well col-md-6" align="center">
                    <p> <span class="glyphicon glyphicon-info-sign"></span>
                        Start your work by setting a name for your Desk</p>

                </div>
            </div>
            <div class="col-md-10"></div>
        </div>

它不起作用；每个孔都出现在其各自父级的左侧。有谁知道我如何将它们放在中央？提前致谢!!

这是我的 CSS:

hr {
    border-color : #474343;
}

.header-dimensions {
    width: 110px;
    height: 50px;
}

.logoname-dimensions {
    display: inline;
    width: 115px;
    height: 40px;
}

.navbar-pad:{
    padding: 0;
}

.right-float{
    float: right;
}

Answer 1

您正在尝试做的是一种与自身作对的事情。

首先，您将 well 类应用到与 col-md-* 元素相同的元素。这导致整个元素向左浮动(来自 col-md-* 类)。您必须确保在您自己的代码中覆盖了 float。

其次，您不能使用 align="center" 使框元素居中。它适用于文本，但我认为大多数人会建议您在 CSS 而不是 HTML 中保持居中。

因此，当您覆盖 float 并删除对齐属性时，我建议您在两个应该居中的元素上设置一个新类，并将 margin: 0 auto; 添加到该类。

这是一个pen这表明它是如何做到的。 align="center" 已删除，我已将类 well__centered 添加到元素中。检查样式的 CSS。