How to align divs horizontally with html? - css

Question

I need to do a toolbar that consists of a Left-arrow button, a set of image buttons then a Right-arrow button
My requirements are:
the toolbar needs to be on one row
the toolbar needs to be centered horizontally
the set can have many image buttons (N is unknown)
when the window is too small in width the middle div should hide the image buttons that don't fit
To center everything horizontally I found this to work well on 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>
But unfortunately the box parameters breaks the overflow:hidden style that is necessary if the middle set becomes too big to fit everything.
So is there another way of centering everything horizontally ?

Answer 1

As long as the elements are not floated, you can use text-align: center, along with 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>
Check this JSFiddle

Answer 2

There are a few ways to do this I'm not sure exactly what is best for you.
First be sure to set the width of your div element that contains the buttons. other wise it will default to 100% and the margin:0 auto won't work;
something like this
<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

The overflow:hidden will only work if you give it a set width and height.
<div style="overflow:hidden; width:213px; height:73px;">
View the JSFiddle

Answer 4

Above answers not met the condition
when the window is too small in width the middle div should hide the image buttons that don't fit
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

The "margin: 0 auto" inspired me to find a solution. thanks
I am using a table instead of a div and it's then working well
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>
Try playing with the splitters in fiddler and you will see how it reacts beautifully.