CSS を使用して 2 つの画像を中央に並べて配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して 2 つの画像を中央に並べて配置するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-02 20:01:30

オリジナル

956 人が閲覧しました

How to Center Two Images Side-by-Side Using CSS?

CSS を使用して画像を並べて中央揃えにする

質問:

2 つの画像を中央揃えにしようとしているときに問題が発生しますHTML ドキュメント内で画像が隣接しています。私の努力にもかかわらず、一方がもう一方の下に表示され続けます。画像を効果的に中央に配置し、並べて配置するにはどうすればよいですか?

HTML コード:

<a href="mailto:[email&#160;protected]">
<img id="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/>
</a>
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
<img id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/>
</a>

ログイン後にコピー

CSS コード:

#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
}

ログイン後にコピー

解決策:

画像を水平方向に配置するには、CSS コードを次のように変更します。

.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
}

#images{
    text-align:center;
}

ログイン後にコピー

変更された HTML:

<div id="images">
    <a href="mailto:[email&#160;protected]">
    <img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/>
    </a>
    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
    <img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/>
    </a>
</div>

ログイン後にコピー

ライブデモ:

[デモリンク]

以上がCSS を使用して 2 つの画像を中央に並べて配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。