Как выровнять divs горизонтально с html?

Question

мне нужно сделать панель, которая состоит из кнопки с левой стрелкой, набор кнопок изображения затем кнопку с правой стрелкой

Мои требования:

• панель должна быть на одном строка

• панель должна быть по центру по горизонтали

• множество может иметь много кнопок изображения (N неизвестен)

• когда окно слишком мал по ширине средний DIV должен скрыть изображения кнопок, которые не подходят

Чтобы центрировать все горизонтально я нашел, что это хорошо работает на хроме:

<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, а также отображение: встроенный блок.

<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

"запас: 0 авто" вдохновил меня, чтобы найти решение.спасибо

Я использую таблицу вместо 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> 

Попробуйте играть с раскольниками в стельку, и вы увидите, как он реагирует красиво ,