0

Possible Duplicate:
Vertically centering a div inside another div

I'm trying to vertically align one div inside another. It is also centered, but that I seem to be able to get to work. The inside div has a explicit width, which I need to be able to do. The height should be determined by the amount of content. I've tried various solutions I've seen on stackoverflow, but none of them seem to quite work right. A few of them seem to work if there is no explicit width on the inner div, or if the horizontal centering is not necessary. This question is different from others in that those do not have explicit widths, or when they do, the solutions include static padding, or javascript which calculates padding. I wish to avoid this.

html:

<div class="outer">
    <div class="inner">
        //some stuff<br/>
    </div>
</div>

css:

.outer {
width: 100%;
height: 96px;
    position:relative;
border:1px black solid;   
background-color: black;
}

.inner {
    width:900px;
    height: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
border: 1px red solid;
vertical-align: middle;
background-color: white;
}

http://jsfiddle.net/F4nrp/

Update, this was solved by Passerby below. There are indeed many people asking very similar questions, however I think there is enough different here. The answer was also not the same as any of the other answers I have seen.

Community
  • 1
  • 1
William
  • 1,295
  • 1
  • 10
  • 19
  • Article from [ThemeForest](http://blog.themeforest.net/tutorials/vertical-centering-with-css/). – Whymarrh Feb 05 '13 at 01:32
  • 1
    How about this: http://jsfiddle.net/F4nrp/1/ ? – Passerby Feb 05 '13 at 03:22
  • I found a workable solution. The outer div is 96px high, the inside is 40px high. I added : margin: 28px auto; To the inside div. 28 = (96-40)/2. I would rather not have to include the number 28 inside or the number 40 for the inside div height. It would be ideal if regardless of the inside height, the inside div was always aligned vertically. Also, there will be another div aligned at the other end of the outside div, and that div may be of a different height. So both these divs should be aligned inside the outer div. – William Feb 05 '13 at 18:48
  • Thank you Passerby, that solution works well. Another problem that I ran into was when adding a second inner div to the right of the first inside div. It would not align nicely with my code, when that div "natural" height was different than the first inside div. – William Feb 06 '13 at 17:19

0 Answers0