Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

How To Vertically Center HTML ELements

Was trying to figure out how to vertically center tags since I’m building a menu. Finally got it.

To Vertically Center HTML ELements

Simply do the following in your style sheet:

[code language=”css”]
#parent {
display: table;
}

#parent child {
display: table-cell;
vertical-align: middle;
}[/code]

Just make sure that you keep the parent child relationship in tact. I was originally trying to do something like this:

[code language=”html”]
<label>
<input type="checkbox" name="cpl" value="cpl" />
<p class="subheading pink">Cost Per Lead/CPL</p>
<p class="normal">The text for CPL Awesomeness</p>
</label>
[/code ]

This doesn’t work though because I have 2 different child elements,<code>input</code> and <code>p</code>. So if I want to vertically center the checkbox, this wouldn’t work.

Instead I just wrapped the elements:

[code language="html"]
<label>
<div><input type="checkbox" name="cpl" value="cpl" /></div>
<div>
<p class="subheading pink">Cost Per Lead/CPL</p>
<p class="normal">The text for CPL Awesomeness</p></div>
</label>
[/code]

So now the child element is a div tag. This will allow me to vertically center the children.

My css is as follows:

[code language=”css”]
label {
display: table;
}

label div {
display: table-cell;
vertical-align: middle;
}
[/code]

And that’s it! Now my elements are vertically centered!!

Resource: Css Tricks

Advertisement
About the Author
What's UP! This is my site, I write 99% of the articles on here. I'm also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I've made courses and have a membership as well to help get you on your feet!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top