我的<div>内容没有正确居中</div>

Question

我有div看起来像这样

<div id="question">

    <h1 id="answer_no" class="question_element">NO</h1>

    <div id="slider" class="question_element">
        <input type="range" min="-1" max="1" value="0" step="0.01" onmousemove="showValue(this.value)"/>
        <span id="range">0</span>
    </div>

    <h1 id="answer_yes" class="question_element">YES</h1>

</div>

我希望所有question_element个对象都水平居中。我的CSS看起来像这样

#question {
    border: 1px solid orange;
    width: 100%;
    text-align: center;
}

.question_element {
    float: left;
    display: inline-block;
    margin-top: 200px;
    margin-left: 25px;
    margin-right: 25px;
}

#slider {
    width: 400px;
    margin-top: 215px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

但是，我的页面仍然如下所示：

如您所见，元素仍然向左移动。我希望他们全部水平居中。我做错了什么？

Answer 1

你可以删除float属性，或者你可以将所有内部div包装成另一个div并将其设置为inline-block。