Centering vertically relative to another element in css?

There's a couple of ways of doing this, my choice is using display: table-cell on the container and vertical-align: middle. The catch is that you can't put position absolute on the container.

Up vote 2 down vote favorite share g+ share fb share tw.

I've got something like the following situation: prev some content next Where what I'd like is for the result to look something like this: Note that prev and next are centered vertically in reference to Content and that all of it is centered horizontally on the page. Sorry if this has been covered before but there seems to be a lot of different ways to do similar things and I'm unsure of which apply to this situation. CSS3/HTML5 isn't really a problem as long as it works in Chrome, Safari, Firefox and maybe IE (not crucial).

EDIT: Also, I'm not sure if this is really clear in the question, but I don't know the size of Content. It could be anything. EDIT 2: Additionally, content is usually an image.

Html css html5 css3 link|improve this question edited Oct 7 '11 at 20:30 asked Oct 6 '11 at 23:00Paul Wicks6,853135180 74% accept rate.

There's a couple of ways of doing this, my choice is using display: table-cell on the container and vertical-align: middle. The catch is that you can't put position absolute on the container: #container { border: solid #000 1px; display: table-cell; vertical-align: middle; height: 400px; width: 400px; text-align: center; } #container div { display: inline-block; } #content { border: solid #000 1px; padding: 10px; width: 200px; } Works on IE8+ and modern browsers. jsfiddle.net/E97yY.

Another approach, this time using absolute positioning, if you're willing to change your HTML structure a bit. Note that the Prev and Next buttons could be anywhere within the content div, even outside of the content div if you wanted to use your container to constrain the width, or perhaps add another width-constraining wrap. (Not really necessary, I'd imagine.

) Note: I've removed all unnecessary markup from this answer. See the fiddle for a visibly functioning example. Fiddle The HTML: prev next some content The CSS: #content { margin:0 auto; position:relative; } #prev, #next { position:absolute; width:40px; height:20px; top:50%; margin-top:-10px; /* negative half of height */ } #prev { left:-45px; /* negative width plus any desired padding */ text-align:right; } #next { right:-45px; /* negative width plus any desired padding */ text-align:left; }.

The best way to center elements is to use inline-blocks and vertical-align. Here is a fiddle for a start: jsfiddle.net/kizu/7Qj3G/ Here you set display: inline-block to needed elements, add vertical-align: middle to them and it's almost done. The remaining thing is that if you need support in IE, then you'll need to “turn on” the inline-block behavior for block-level elements by using display: inline; zoom: 1; on them.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.