CSS - Vertical centering

Delzhand

I'm trying to center the text of a link vertically. I'm no CSS scrub, but here's the challenge - the design is responsive, so the link text could be one line, or many, it has to fill the containing element, and the text has to be centered. I've set up a jsfiddle at http://jsfiddle.net/pHcgh/2/

In that jsfiddle, the 150px is just for illustrative purposes.

Now, I'm hoping there's some arcane wizardry that can do this, but based on my understanding, it's not possible. table-cells and line-height hacks are out - the markup just isn't there to support the first, and the second doesn't work because 1 line at some widths could be 2 at another.

I can change the markup, but I'd prefer not to add non-semantic elements. Might be unavoidable, but I thought I'd ask first!

gjaustin

Try this:

ul {
padding: 0;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:150px;
width:100%;
}

li {
background: #FCC;
list-style-type: none;
width: 1000%;
}

a {
background: #CCF;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}

It seemed to work, though I'm not sure it's exactly correct.

Edit: Hmm, it's still having an issue with adjusting when adding more lines. I think the <ul> tag is going to need another tag wrapping it with a fixed height.

Seguer

Pretty sure it can't be done if you're wanting a fixed/set height for the ul.

There's a trick involving line-height, but that fails if you're discussing multi-line text (as you mentioned).

@gjaustin 's solution won't work in a responsive layout, unfortunately. The use of position: absolute is also kind of disconcerting.. it would be sitting at the top left of the closest parent element with a position anything except "static" (if none, it'd be the body element).

This solution might be close enough to what you want:

(removes the height on the ul and li)

http://jsfiddle.net/TdHDp/

Note the comments in the CSS. Only supports IE8+ due to the box-sizing declarations.

SeñorAmor

Is JavaScript an option? Should be pretty easy to do it that way.

Figgy

Table cells? What about CSS Tables?

http://jsfiddle.net/pHcgh/8/

Mark-up is unchanged.