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...
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. :(
.nav {
margin-top: 167px;
width: 1024px;
height: 34px;
}
.nav_button {
height: 34px;
margin: 0 auto;
margin-right: 10px;
float: left;
}<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>
6 Answers
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
Consider adding this to your CSS to resolve the problem:
button {
margin: 0 auto;
display: block;
}
Another nice option is to use :
width: 40%;
margin-left: 30%;
margin-right: 30%
The problem is with the following CSS line on .nav_button:
margin: 0 auto;
That would only work if you had one button, that's why they're off-centered when there are more than one nav_button divs.
If you want all your buttons centered nest the nav_buttons in another div:
<div class="nav">
<div class="centerButtons">
<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>
</div>
And style it this way:
.nav{
margin-top:167px;
width:1024px;
height:34px;
}
/* Centers the div that nests the nav_buttons */
.centerButtons {
margin: 0 auto;
float: left;
}
.nav_button{
height:34px;
margin-right:10px;
float: left;
}
Consider adding this to your CSS to resolve the problem:
.btn {
width: 20%;
margin-left: 40%;
margin-right: 30%;
}
when all else fails I just
<center> content </center>
I know its not "up to standards" any more, but if it works it works
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
