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

CSS에서 두 이미지를 나란히 가운데 정렬

웹 디자인의 일반적인 과제는 특히 필요할 때 이미지를 가로로 정렬하는 것입니다. 나란히 표시됩니다. 이는 까다로울 수 있지만 CSS를 약간만 조정하면 원하는 결과를 쉽게 얻을 수 있습니다.

일반적인 접근 방식 중 하나는 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>

디스플레이 설정: inline-block for 이미지를 기준선을 따라 수평으로 나란히 흐르게 할 수 있습니다. 또한 상위 컨테이너에 적용된 text-align:center 속성은 이미지가 컨테이너 내 중앙에 위치하도록 보장합니다.

이 접근 방식을 사용하면 이미지가 나란히 정렬되어 시각적으로 매력적이고 반응이 빠른 레이아웃이 제공됩니다. .

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