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

画像を横に並べて中央に配置する

2 つの画像を並べて中央に配置しようとしましたが、下に 1 つが表示されるという問題が発生しましたもう 1 つは、解決策を詳しく見てみましょう:

提供された CSS コードは、同じ ID (#fblogo) を使用して両方の画像をターゲットにしているようです。ただし、それらを水平方向に中央揃えにして隣り合うように配置するには、次のような異なる CSS プロパティを適用する必要があります:

1. 両方の画像をクラスでスタイル設定します: ID を使用する代わりに、両方のイメージに同じクラス (.fblogo など) を割り当てます。これにより、それらを個別にターゲットにすることができます。
2. インラインブロック表示: 表示の変更: ブロック;表示するには: インラインブロック; .fblog 用。これにより、画像がインライン要素として表示され、水平方向に流れることが可能になります。
3. Automatic margins: Set margin-left: auto;およびマージン右: 自動; .fblog 用。これにより、画像がコンテナ内の中央に配置されます。
4. コンテナで囲む: #images のような ID を使用して、画像を div などのコンテナで囲みます。
5. コンテナを整列させます: text-align: center; を追加します。 #画像に。これにより、画像がコンテナ内の中央に配置されます。

更新された CSS と HTML は次のとおりです:

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>​

デモ:

ここで更新されたデモを参照してください: [デモリンク]

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