html - Float :left div 内的居中对齐按钮

Question

我正在尝试让 3 个左对齐的 float 。 Here是执行此操作的以下 JFiddle。

div { height: 45px; }
div.side {
    background-color: skyblue;
    width: 72px;
    float: left;
}
div#range {
    background-color: tomato;
    width: 216px;
    float: left;
}
span {
    width:100%;
    text-align: center;
    display: block;
    margin: 3px auto;
    /* background-color: gold; */
}

<div id="start" class="side">
    <button type="button">Click Me!</button>
</div>
<div id="range"></div>
<div id="end" class="side">
    <button type="button">Click Me!</button>
</div>

我现在要做的是将名为 side 的 div 中的按钮居中对齐。我试过使用另一个将文本对齐设置为居中的 div，但这不起作用。

Answer 1

应用于 .side div 的 text-align: center 应该可以解决问题，因为 button 元素默认是内联的。请注意，我更改了 .side 的宽度以使居中效果明显:https://jsfiddle.net/021gu79c/1/ .

CSS:

div.side {
    background-color: skyblue;
    width: 120px;
    float: left;
    text-align: center;
    line-height: 45px;
}