如何将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参数打破了溢出：如果中间集太大而无法容纳所有内容，则需要隐藏样式。

那么，有没有其他方法可以将所有东西水平居中？

Answer 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

Answer 2

有几种方法可以做到这一点，我不确定什么对你最有利。

首先，一定要设置包含按钮的div元素的宽度。另一方面，它将默认为100%，并且margin:0auto将不起作用；

像这个

<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>

Answer 3

只有给overflow:hidden设置宽度和高度，它才会工作。

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

查看JSFiddle

Answer 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/

Answer 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中玩分裂器，你会发现它的反应很漂亮。