Reputation: 293
I'm looking to center align two buttons using CSS 3. So far, I have this code. Right now, the buttons are left-aligning by default. Any help would be great.
HTML:
<ul>
<li class="menubutton"><a href="about.html">About</a></li>
<li class="menubutton"><a href="staffing.html">Staff</a></li>
</ul>
CSS:
.menubutton{
text-align: center;
background-color: beige;
height: 50px;
width: 100px;
border-radius: 5px;
display: inline-block;
}
Upvotes: 1
Views: 17004
Reputation: 317
You definitely want to put the text-align:center; on the outside of the elements you want to center. If you can't, use a combination of width and margin: X auto;
Upvotes: 1
Reputation: 262
You should have the <ul>
like this:
<ul>
<li class="menubutton"><a href="about.html">About</a></li>
<li class="menubutton"><a href="staffing.html">Staff</a></li>
</ul>
and the css:
ul{
text-align: center;
}
Upvotes: 4
Reputation: 727
Put your buttons inside a div and use text-align:
<div id="container">
<li class="menubutton"><a href="about.html">About</a></li>
<li class="menubutton"><a href="staffing.html">Staff</a></li>
</div>
CSS:
#container {
text-align:center;
}
.menubutton{
text-align: center;
background-color: beige;
height: 50px;
width: 100px;
border-radius: 5px;
display: inline-block;
}
Try it here
Upvotes: 1