Question

I am using a table and a div to create a centered button group…but for some reason, my buttons are aligned weird? Here is a jsfiddle of the issue. Jsfiddle

Is there any way I can fix this to where I can add more buttons and have them straight?
If more code is required, please ask me and I will post it.

Here is my html:

 <div align = "center" class="bdy">

        <table class="wrapper">

            <tr>

                <td>

                    <button type="button">Services</button>

                    <br>

                    <button type="button">Live</button>

                </td>


            </tr>

        </table>

    </div>​

My CSS is on the fiddle!

Answer 1

I fixed the alignment by removing the whitespace between buttons, but this is not the right way to do it.

Fixed version (reference only): http://jsfiddle.net/J7rYF/1/

Tables shouldn’t be used to layout buttons. div align=center is deprecated. <br> shouldn’t be used for this type of formatting purpose.

If you want an out of-the-box example/solution, Twitter Bootstrap has some very nice examples and templates.

Or, here’s a simple template that you can start with for centering a list of buttons: http://jsfiddle.net/J7rYF/10/

HTML

<div class="button-set">
    <ul>
        <li><button type="button">Services</button></li>
        <li><button type="button">Live</button></li>
    </ul>
</div>

CSS

.button-set {
   width: 300px;
   margin: 0 auto; /* this centers the element */       
}

.button-set UL {
    list-style: none; /* removes bullets */  
}

/* this controls spacing between adjacent buttons */
.button-set LI + LI {   
    margin-top: 4px;
}

/* width: 100% is needed...everything else is optional */
BUTTON {
    width: 100%;
    border: 1px solid #000;
    padding: 4px;
    border-radius: 4px;
    color: #fff;
    background-color: #006DCC;
}

​