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只占据了div的70％屏幕。然而，由于您已应用margin: 0 auto;属性，整个div本身都会居中。因此，图像和文本都出现在float: right;的最左边界。

第一张图片不像第二张图片那样在右边的原因是因为您没有将float: left;属性应用于它，而是将其置于div。

如果您希望图像偏离文本，则必须在div内给它自己的位置。否则，将h2宽度设置得更宽，然后将位置属性分别应用于图像和div。

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

我不确定你要完成的具体内容是什么，所以我在答案中不能再具体了。如果你澄清你需要什么，那么我可以帮助你更多。

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

1 个答案: