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が制約しているように私には見えます -- つまり、があるため、画面の 70% しかh2占有していません。それでも、適用したプロパティにより、全体が中央に配置されます。したがって、画像とテキストの両方が の一番左の境界に表示されます。width: 70%;divdivmargin: 0 auto;div

最初の画像が 2 番目の画像のように右側にない理由は、float: right;プロパティを適用していないためですfloat: left;。

画像をテキストからオフセットしたい場合は、div. それ以外の場合は、div幅を広くしてから、位置プロパティを画像とh2それぞれに適用します。

このフィドルを参照してください: http://jsfiddle.net/kX4bh/2/。の幅を全画面表示にし、スタイルdivを使用して画像をオフセットする方法に注目してください。left: 20px;

あなたが具体的に何を達成しようとしているのかわからないので、これ以上具体的に答えることはできません。何が必要なのかを明確にしていただければ、より多くのことをお手伝いできます。

于 2013-11-02T17:24:48.473 に答える