HTML과 CSS에서 두 이미지를 나란히 중앙에 배치하려면 어떻게 해야 합니까?

이미지를 수평으로 나란히 중앙에 배치

두 개의 이미지를 나란히 중앙에 배치하려고 시도했지만 아래에 하나를 표시하는 데 문제가 발생했습니다. 다른 하나는 해결책을 살펴보겠습니다.

제공된 CSS 코드는 동일한 ID를 사용하여 두 이미지를 모두 타겟팅하는 것으로 보입니다. (#f블로고). 그러나 수평으로 중앙에 배치하고 나란히 정렬하려면 서로 다른 CSS 속성을 적용해야 합니다.

1. 클래스를 사용하여 두 이미지의 스타일을 지정합니다. ID를 사용하는 대신, 두 이미지 모두 동일한 클래스(예: .fblogo)를 할당합니다. 이를 통해 개별적으로 타겟팅할 수 있습니다.
2. 인라인 블록 디스플레이: 디스플레이 변경: 블록; 표시하려면: inline-block; .fblogo용. 이렇게 하면 이미지가 인라인 요소로 표시되어 수평으로 흐를 수 있습니다.
3. 자동 여백: 여백 왼쪽 설정: auto; 및 여백 오른쪽: 자동; .fblogo용. 이렇게 하면 이미지가 컨테이너의 중앙에 배치됩니다.
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>​

데모:

여기에서 업데이트된 데모를 참조하세요: [DEMO 링크]

위 내용은 HTML과 CSS에서 두 이미지를 나란히 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!