CSS alignment without using tables

[DonTron]

Im trying to align some text and a field using CSS only
Like this….

Phone: [123456]

I tried everything (and the vertical-align:middle does nothing)

Any ideas would be helpful :)

http://codepen.io/DonTron/pen/zBrGBK

[I.m.learning]

Just use the html form element instead. Something like

<form>
First name: <input type=”text” name=”FirstName”><br>
Last name: <input type=”text” name=”LastName”><br>
<input type=”submit” value=”Submit”>
</form>

[Paulie_D]

vertical-align doesn’t work on floated elements…nor should float be used as the same time as display:inline…they’re mutually exclusive.

If you remove the float and use display:inline-block then vertical-align works.

http://codepen.io/Paulie-D/pen/NrxGwd

Re: the previous post, it’s considered bad practice to use br tags for spacing…that’s what margins and padding are for.

[DonTron]

Thanks Paulie_D – that was an easy and effective fix!!
I didnt know about inline-block :-)

[Author]

Posts