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

CSS で 2 つの画像を並べて中央揃えにする

Web デザインにおける一般的な課題は、特に画像を水平に配置する必要がある場合に、画像を水平に配置することです。並べて表示されます。これは難しいかもしれませんが、CSS をいくつか調整するだけで、目的の結果を簡単に得ることができます。

一般的なアプローチの 1 つは、display: block プロパティと margin: auto プロパティを使用することです。ただし、この方法では画像が水平方向ではなく垂直方向にスタックされることがよくあります。

この問題を解決するには、次の洗練された解決策があります:

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>

画像に display: inline-block を設定すると、画像がベースラインに沿って横に並んで流れるようになります。さらに、親コンテナに適用される te​​xt-align:center プロパティにより、画像がコンテナ内で確実に中央に配置されます。

このアプローチにより、画像が横に並べられることが保証され、視覚的に魅力的で応答性の高いレイアウトが提供されます。 .

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