[Solved] How to align buttons (with height and width) horizontally?

[hcd1]

just three buttons
…

<button>button</button>
<button>button button button button</button>
<button>button</button>

…
and
button{
width:100px;
height:100px;
}

the second button fall out of alignment

http://jsfiddle.net/pztq29LL/1/

[Paulie_D]

inputs are inline elements and so their default vertical alignment is baseline.

You would need to set this (I would suggest) to top

button {
    width:100px;
    height:100px;
    vertical-align: top;
}

JSfiddle

[hcd1]

cool

so there is no difference in this case between vertical-align: top; and vertical-align: middle; ?

http://jsfiddle.net/pztq29LL/7/

[Paulie_D]

Normally it would but it’s just that all of your buttons are the same size in this case….try taking the height off.

Jsfiddle

[pramodn]

Use float:left and margin-left:10px;

http://jsfiddle.net/pztq29LL/17/

[hcd1]

i need them in the center and stacked http://jsfiddle.net/pztq29LL/7/

[Paulie_D]

I’m not sure what you are asking…they seem to be centered.

What does ‘stacked’ mean.

What is this supposed to look like?

[hcd1]

Actually this is what I needed eventually:
http://jsfiddle.net/pztq29LL/19/

rows are centered horizontally, text inside centered vertically, and if there are too many buttons, they overflow on the next row. That’s what i called stacking, may be wrongly

In some other case I may need divs, but I know it is either flex or a bunch of markup for such a scenario

[Paulie_D]

Nope still not getting it.

rows are centered horizontally, text inside centered vertically, and if there are too many buttons, they overflow on the next row. That’s what i called stacking, may be wrongly

Isn’t that exactly what you have now?

[hcd1]

yes i got what i wanted both initial question and the bigger thing.

thanks!!

[Author]

Posts