html - 我的 内容没有正确居中

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。