0

我是绝对定位的新手，我不知道为什么 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/

4

1 回答 1

1

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

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

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

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

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

于 2013-11-02T17:24:48.473 回答