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

CSS를 사용하여 이미지를 나란히 중앙에 배치

질문:

2개를 중앙에 배치하는 중에 문제가 발생했습니다. 내 HTML 문서에서 서로 인접한 이미지. 내 노력에도 불구하고 그들은 지속적으로 다른 것 아래에 하나씩 표시됩니다. 이미지를 효과적으로 중앙에 배치하고 나란히 배치하려면 어떻게 해야 하나요?

HTML 코드:

<a href="mailto:%5Bemail%C2%A0protected%5D">
<img src="/static/imghwm/default1.png" data-src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg" class="lazy" id="fblogo" border="0" alt="Mail">
</a>
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
<img src="/static/imghwm/default1.png" data-src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg" class="lazy" id="fblogo" border="0" alt="Facebook">
</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:%5Bemail%C2%A0protected%5D">
    <img class="fblogo lazy" src="/static/imghwm/default1.png" data-src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg" border="0" alt="Mail">
    </a>
    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
    <img class="fblogo lazy" src="/static/imghwm/default1.png" data-src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg" border="0" alt="Facebook">
    </a>
</div>​

실시간 시연:

[데모 링크]

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