Center Vertically in CSS?

[realph]

Hey there,

First post here so go easy on me, I’m not sure if this is even called center vertically but what the hey.

It’s probably something really simple that I’m just overlooking. I’m trying to get from this (Actual Site):

[attachment=1]current.jpg[/attachment]
To this (Design):

[attachment=0]future.jpg[/attachment]
I basically want to push the text and search-bar down to the absolute center of that bar, but without using padding if that’s even possible. Sort of like the margin: 0 auto; trick but instead of horizontally I would like it to work vertically.

Any help will be appreciated.

Thanks in advance.

[noahgelman]

Change the line height of the text to the height of the div you have it placed in and it will be centered for you. as for the search bar, that’s going to need padding or margin to place i believe.

[tafkanator]

It would be nice if you could provide a code too. Then its much easyer to help You. But you could try one trick that has helped me a lot. Try this rule: line-height: ???px
??? = the height of your grey div.
For example:

Code:

vertycally center

Code:

#mydiv{
height:100px;
line-height:100px;
overflow:hidden /*This is here just in case you have more than one row of text*/
}

works only if you have one row of text.

But without the code i cannot help much more.

[Author]

Posts