1

以下に示すように、サイズの異なる2つの画像を上部に配置しようとしているコードの例をまとめました。

HTML

<div id="test">
    <div class="social-media">
        <img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
        <img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
    </div>
</div>

CSS

test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}

.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}

オンラインでいくつかの投稿を読んだ後、垂直方向の配置は div では機能せず、解決策は代わりに絶対配置を使用することであることに気付きました。唯一の問題は、画像の親 div に既に絶対配置を使用していることです。

絶対値でもある親 div 内で絶対値を実行することをお勧めします。

ただし、img に絶対位置を設定すると、クラスですべての img を指定しない限り、すべての img が互いに重なり合ってしまいます。

それで、私の次の考えは、div 内の img にフロートを置くことでした。これが良い習慣なのか、誰かがこれを行うよりクリーンな方法を教えてくれるのか知りたかっただけですか?

また、画像を中央に配置したい場合、フロートメソッドは画像を上部に配置するという意味で機能するため、これをどのように行うのですか?中央またはおそらく中央に配置する方法がわかりません下？

4

2 に答える 2

2

ソーシャル メディアの div に overflow:auto を配置してから、イメージに float:left を追加します。

于 2012-07-12T16:13:21.373 に答える
1

vertical-align: -1px;上に行くような負の整数も使用できることに注意してください-1px

詳細については、CSS vertical-align プロパティを参照して、ここで試してみてください。

于 2012-07-12T16:35:26.117 に答える