css - 如何将div与html水平对齐？

Question

我需要做一个由左箭头按钮、一组图像按钮和一个右箭头按钮组成的工具栏

我的要求是:

• 工具栏需要在一行上

• 工具栏需要水平居中

• 集合可以有多个图片按钮(N未知)

• 当窗口宽度太小时，中间的 div 应该隐藏不适合的图像按钮

要水平居中所有内容，我发现这在 chrome 上运行良好:

<div style="display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center;" class="toolbar">
    <button>LEFT</button>
    <div style="overflow:hidden;">
        <button style="height:72px">1</button>        
        <button style="height:72px">2</button>        
        <button style="height:72px">3</button>
        <button style="height:72px">4</button>        
        <button style="height:72px">5</button>
        <button style="height:72px">6</button>        
        <button style="height:72px">7</button>        
        <button style="height:72px">8</button>
        <button style="height:72px">9</button>
    </div>
    <button>RIGHT</button>
</div>

但不幸的是，box 参数破坏了 overflow:hidden 样式，如果中间集变得太大而无法容纳所有内容，则该样式是必需的。

那么还有另一种方法可以水平居中吗？

Answer 1

只要元素不是 float 的，就可以使用 text-align: center 和 display: inline block。

<div style="text-align:center;" class="toolbar">
    <button style="display: inline-block;">LEFT</button>
    <div style="overflow:hidden; display:inline-block;">
        <button style="height:72px">1</button>        
        <button style="height:72px">2</button>        
        <button style="height:72px">3</button>
        <button style="height:72px">4</button>        
        <button style="height:72px">5</button>
        <button style="height:72px">6</button>        
        <button style="height:72px">7</button>        
        <button style="height:72px">8</button>
        <button style="height:72px">9</button>
    </div>
    <button style="display: inline-block;">RIGHT</button>
</div>

检查这个JSFiddle