1

埋め込みpdfをdiv内に中央揃えするのに少し問題があります。

これは私のHTMLコードスニペットです。

<div id="splash">
    <div class="post">
    <h2>Heading </h2>
        <p><embed src="images/dop.pdf" ALIGN=CENTER width="820" height="375"></p>
    </div>
</div>

これが私のstyle.cssファイルからの関連するCSSです：

#splash {
padding: 40px;
position: relative;
background: #FFF;
margin: 20px 0 0 0;
height: 300px;
width: 1100px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

.post {

margin-left: auto ;
margin-right: auto ;
}

p {
margin-bottom: 1.75em;
margin-left: auto ;
margin-right: auto ;    
}

私の知る限り、margin-leftとmargin-rightをautoに設定すると、postクラスまたは<p>タグのいずれかのdivにあるものが中央に配置されます。では、なぜ.pdfが左側に残っているのでしょうか。

4

3 に答える 3

1

明示<div class="post">的な幅を指定します。

例えば：

.post {
width: 820px;
margin-left: auto ;
margin-right: auto ;
}

左右の余白をautoに設定すると、幅が親要素の100％未満の場合にのみ機能します。それ以外の場合、ブロック要素であるため、divは可能な限り最大の幅に拡張されます。また、これALIGN=CENTERは古くて非推奨であり、使用しないでください。

jsFiddleの例

于 2012-11-15T21:50:49.097 に答える
1

内側<div>（post）には。が必要widthです。それ以外の場合は、周囲の要素（splash）を100％埋めます。

于 2012-11-15T21:58:17.610 に答える
1

divすべての要素がデフォルトで行うように、要素の幅が100％の場合、両側の余白をautoに設定しても何も起こりません。幅を指定すると、残りの水平方向のスペースが左右の余白で均等に分割されます。例：

.post { width: 500px; margin-left: auto; margin-right: auto; }

の自動マージンはpおそらく同じ理由で機能していないことに注意してください。おそらくその仕様を削除することができます。

于 2012-11-15T21:59:10.883 に答える