Stevanicus Stevanicus - 3 months ago 17
CSS Question

Button Center CSS

Usual CSS centering issue, just not working for me, the problem is that I don't know the finished width px

I have a div for the entire nav and then each button inside, they dont center anymore when there is more than one button. :(

CSS

.nav{
margin-top:167px;
width:1024px;
height:34px;
}

.nav_button{
height:34px;
margin:0 auto;
margin-right:10px;
float:left;
}


HTML

<div class="nav">
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>

</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>

</div>
</div>


Any help would be greatly appreciated. Thanks




Result

If the width is unknown, I did find a way a center the buttons, not entirely happy but doesnt matter, it works :D

The best way is to put it in a table

<table class="nav" align="center">
<tr>
<td>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>

<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</td>
</tr>
</table>

Answer

I realize this is a very old question, but I stumbled across this problem today and I got it to work with

<div style="text-align:center;">
    <button>button1</button>
    <button>button2</button>
</div>

Cheers, Mark

Comments