Html – How to have equal padding on both side of a div. CSS


I have this element:

<div class="menubar">
    <a href=""><img src="../img/home_button.png"/></a>
    <a href=""><img src="../img/a_button.png"/></a>
    <a href=""><img src="../img/b_button.png"/></a>
    <a href=""><img src="../img/c_button.png"/></a>

My goal is to have the content of the menubar div being centered.

Using display: table; and margin:auto; achieves that but the background image I am using is cropped to fit only the div's content:

.menubar {
    display: table;
    margin: auto;

So then, I have this other version that adds 50% padding to both sides, but the problem is that the total width of the result is 100% + the width of the buttons.

.menubar {

I achieve something closer by using max-width:960px (100%) but there's still a problem: It doesn't actually apply the same amount of padding to both side. It ends up padding 50% to the left and whatever is left to reach 960px to the right.

Any help welcomed!

Best Solution

Use text-align instead.

.menubar {