CODEWITHSUNDEEP
htmlcssbuttoncenter-align
Munesawagi
Munesawagi

Reputation: 293

Center align buttons (CSS 3)

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

Answers (3)

user1842315
user1842315

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

Bak
Bak

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

Mo&#239;ze
Mo&#239;ze

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

Related Questions