Jump to content

can't get text-align and vertical-align to work together


niche
 Share

Recommended Posts

I can't get the text-align vertical-align properties to work in the same class (inlines are my preference for examples):

<!doctype html><html> <head> <title>Barcode Test</title> </head> <body><div style="float:left;width:100px;height:30px;background-color:aqua;text-align:center;text-align:center;vertical-align:middle;">  <h6 style="margin:0px;">agdsjFKJ</H6></div>		</body> </html>

How do I get them to work together?

Edited by niche
Link to comment
Share on other sites

Automatic vertical centering doesn't work well. There is one exception, and it looks like it might apply here. It works when you have text that absolutely will fit on a single line. What you do is set the height and line-height of the text container to the same value. The text will be vertically centered in the container.Since you're using an <h> element, maybe this will work for you.Note that if the text container is nested in some other container, things still might not look right. I like to use temporary background-colors to see exactly where my containers are in relation to each other.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...