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

Question

我是绝对定位的新手，我不知道为什么 div 中的 H2 文本水平居中...我只是想将其垂直居中。

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

在我看来，你的div 限制了h2——也就是说，因为你有width: 70%;，你的div 只占屏幕的70%。然而，由于您应用了 margin: 0 auto; 属性，整个 div 本身是居中的。因此，图像和文本都出现在div 的最左边界。

第一张图片不像第二张那样在右侧的原因是您没有将float: right; 属性应用到它，而是将它应用到float: left;。

如果您希望图像从文本中偏移，您必须在div 中为其指定位置。否则，使div 的宽度变宽，然后分别将位置属性应用于图像和h2。

看到这个小提琴：http://jsfiddle.net/kX4bh/2/。请注意我如何将div 的宽度设置为全屏，并使用left: 20px; 样式偏移图像。

我不确定您具体要完成什么，所以我的回答不能再具体了。如果您澄清了您的需求，那么我可以为您提供更多帮助。