Centered Table-like Layout With Columns Of Equal Widths Using Css?

On a web page, I have a row of submit buttons. This row of buttons should be centered on the page Each button should be as wide as the widest button (i.e no fixed/hard-coded butto

Solution 1:

Looking at your fiddle, keep in mind that in the table version the buttons are contained in tds. This is the essence of the problem. It appears using table-cell on buttons directly is problematic. If you don't mind chaniging your HTML you can try:

<divclass="button-row"><div><button>Short caption</button></div><div><button>A much longer caption</button></div></div>


.button-row {
    display: table;
    margin: auto;
    table-layout: fixed;
}

.button-row>div {
    display: table-cell;
    width: 50%;
}

.button-row button {
    width:100%;
}

Fiddle

Solution 2:

prob not the answer you are looking for as you said you want to get rid of the width:50%

If you set the width:100% in the button-row button{}all the buttons will be as wide as the widest button

.button-rowbutton {
   display: table-cell;
   width: 100%;
}

Solution 3:

I'm unsure if this would suffice, as you'd have to check each time a new button was added, as to the best size for them. But you could simply add a width to each button and a margin to replicate the table layout.

At least in the HTML's current form.

.button-rowbutton {
    display: table-cell;
    width: 150px;
    margin: 1px;
}

Fiddle: http://jsfiddle.net/kfwhpre8/3/