CSSを使用して2つの画像を水平方向に中央揃えにする方法は?-CSSチュートリアル-php.cn

CSSを使用して2つの画像を水平方向に中央揃えにする方法は?

Susan Sarandon

リリース： 2024-11-02 10:52:02

オリジナル

532 人が閲覧しました

How to Center Two Images Horizontally with CSS?

CSS を使用して 2 つの画像を水平方向に中央揃えする

2 つの画像を並べて配置しようとすると、垂直方向に重なってしまうことがよくあります。この問題を解決するには、CSS コードを変更します。

提供された HTML コードでは、アンカータグ内に 2 つの画像が配置されています。 CSS コードはこれらの画像を中央に配置することを目的としていますが、意図せず垂直に積み重ねられてしまいます。適切な水平方向の配置を実現するために CSS を調整しましょう。

最初の変更は、画像の表示プロパティを「block」から「inline-block」に変更することです。インラインブロックを使用すると、インライン要素として動作しながら、要素をブロックとして扱うことができます (幅と高さを設定できます)。

<code class="css">#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}</code>

ログイン後にコピー

は次のようになります。

<code class="css">.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}</code>

ログイン後にコピー

さらに画像を正しく中央に配置するには、新しい CSS ルールを導入します。

#images{
    text-align:center;
}

ログイン後にコピー

このルールは、2 つの画像リンクを含む "images" div 要素のコンテンツを中央に配置します。

最後に、HTML コードを更新して、両方の画像に共通のクラス名「fblogo」を付ける必要があります。これは、変更された CSS コードで参照されます。変更された HTML:

<code class="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></code>

ログイン後にコピー

これらの変更により、2 つの画像が中央に配置され、並べて表示されるようになります。

以上がCSSを使用して2つの画像を水平方向に中央揃えにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。