CSS를 사용하여 두 이미지를 나란히 가운데에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 두 이미지를 나란히 가운데에 배치하는 방법은 무엇입니까?

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를 사용하여 두 이미지를 나란히 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!