如何将 div 与 html 水平对齐？答案

【问题标题】：How to align divs horizontally with html?如何将 div 与 html 水平对齐？
【发布时间】：2013-08-10 05:02:40
【问题描述】：

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

我的要求是：

工具栏需要在一行
工具栏需要水平居中
该集合可以有许多图像按钮（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>

但不幸的是，盒子参数打破了溢出：如果中间集变得太大而无法容纳所有东西时所必需的隐藏样式。

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

【问题讨论】：

Buttons:position:relative;float:left 添加一个边距，这样按钮就不会被压缩；outer div margin:0 auto
我想左和右按钮将允许用户滚动任何隐藏的图像/按钮？

标签： css html overflow

【解决方案1】：

只要元素不浮动，就可以使用 text-align: center 和 display: inline 块。

<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

【讨论】：

inline-block 打破溢出：隐藏是必要的
如果你在容器中设置了一个高度，它不会影响。 jsfiddle.net/madaaah/3QJKQ/2
是的，别介意我的最后一条评论，我以为你的意思是 display:inline
但问题是，如果您添加越来越多的中间按钮，那么在某些时候我的 3 个元素（左、集、右）将被分成 3 行...jsfiddle.net/4vEsS
只是一个注释......你真的应该把这些样式放在一个单独的文件中，如果你愿意的话......然后，你可以避免重复代码并提高可维护性。

【解决方案2】：

有几种方法可以做到这一点，我不确定哪种方法最适合您。

首先确保设置包含按钮的 div 元素的宽度。否则它将默认为 100% 并且 margin:0 auto 将不起作用；

类似的东西

<style>
.horizantalAlign{
width:900px;
margin:0 auto;
}
</style>
<div class="horizantalAlign">
    <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>

【讨论】：

【解决方案3】：

overflow:hidden 仅在您为其设置宽度和高度时才有效。

<div style="overflow:hidden; width:213px; height:73px;">

查看JSFiddle

【讨论】：

这是我不知道宽度的问题，因为它可以由用户调整大小
您需要确定某种尺寸。您希望它与页面或父元素有什么关系？ 80% 的总大小允许按钮？

【解决方案4】：

以上答案不符合条件

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

overflow:hidden requires size
<div style="overflow:hidden; width:10%; max-width:10%; white-space:nowrap;
            max-height:72px; height:72px">

http://jsfiddle.net/VzyRm/

【讨论】：

是的，高度固定为 72px（对不起，我忘记了我原来的）但是对于宽度，我希望宽度尽可能大。换句话说 max-width: 100% - 左和右按钮的宽度
我明白了，但如果你想隐藏一些 eq，你将需要某种尺寸。 jsfiddle.net/VzyRm/1

【解决方案5】：

“margin: 0 auto”启发了我寻找解决方案。谢谢

我使用的是表格而不是 div，然后它运行良好

http://jsfiddle.net/G3Vu6/4/

<div style="" class="toolbar">
<table style="margin: 0 auto; max-width: 100%">
    <tr>
        <td style=""><button>LEFT</button></td>
        <td style="" >
            <div style="overflow:hidden;max-height:72px">
                <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>
                <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>
                <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>
        </td>
        <td><button style="">RIGHT</button></td>
    </tr>
</table>

尝试在 fiddler 中使用分离器，您会看到它的反应如何。

【讨论】：