相对定位问题中的绝对定位

Question

I'm a complete novice at absolute positioning, and i can't work out why the H2 text in the div is being horizontally centered... I'm only trying to center it vertically.

HTML

  <div class="column1"> 
        <div class="alignCenter">
            <img  style="float:left;width:40%;min-width:300px;max-width:400px;" src="http://dummyimage.com/500x500/000/fff.png&text=SampleImage" alt="">
            <h2 style="float:left;width:60%;max-width:850px";>Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla!Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! Bla! </h2><br style="clear:both">       
        </div>
    </div>

CSS

.alignCenter{
    position:relative;
    width:70%;
    margin: 0 auto;
}
.alignCenter h2{
    position:absolute;
    top:30%;
}

http://jsfiddle.net/gpRDc/

Answer 1

It looks to me like your div is constraining the h2 --that is, because you have the width: 70%; , your div is only taking up 70% of the screen. Yet the entire div itself is centered, due to the margin: 0 auto; property you have applied. Therefore, both the image and the text are appearing at the left-most boundary of the div .

The reason the first image isn't at the right like the second one is because you haven't applied the float: right; property to it, instead you have it at float: left; .

If you want the image to be offset from the text, you will have to give it its own position within the div . Otherwise, make the div width wider, then apply the position properties to the image and the h2 respectively.

See this fiddle: http://jsfiddle.net/kX4bh/2/ . Notice how I made the width of the div to be the full screen, and offset the image by using the left: 20px; style.

I'm not sure what specifically you are trying to accomplish so I can't be any more specific in my answer then this. If you clarify what you need then I can help you more.