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。

因此，当您重写浮点数并删除align属性时，我建议您在两个应居中的元素上设置一个新类，并将margin: 0 auto;添加到该类中。

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

在父容器的中心位置很好

1 个答案: