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>

但遗憾的是，盒子参数打破了溢出：如果中间集太大而无法适应所有内容，则必须使用隐藏样式。

那么还有另一种将水平居中的方法吗？

Answer 1

只要元素没有浮动，你可以使用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

Answer 2

有几种方法可以做到这一点我不确定什么是最适合你的。

首先确保设置包含按钮的div元素的宽度。另外，它将默认为100％和保证金：0自动赢得工作;

类似这样的事情

<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

以上答案未达到条件

当窗口宽度太小时，中间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 4

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

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

查看JSFiddle

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>

尝试使用小提琴手中的分割器，你会看到它的反应非常好。

如何使用html水平对齐div？

5 个答案: