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

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

Susan Sarandon

풀어 주다： 2024-11-02 10:52:02

원래의

531명이 탐색했습니다.

How to Center Two Images Horizontally with CSS?

CSS를 사용하여 두 이미지를 가로로 가운데 정렬

두 이미지를 나란히 정렬하려고 하면 세로로 쌓이는 경우가 흔합니다. 이 문제를 해결하려면 CSS 코드를 수정하면 됩니다.

제공된 HTML 코드에서는 두 개의 이미지가 앵커 태그 내에 배치됩니다. CSS 코드는 이러한 이미지를 중앙에 배치하는 것을 목표로 하지만 의도치 않게 수직으로 쌓입니다. 적절한 수평 정렬이 이루어지도록 CSS를 조정해 보겠습니다.

첫 번째 수정은 이미지의 표시 속성을 "블록"에서 "인라인 블록"으로 변경하는 것입니다. 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;
}

로그인 후 복사

이 규칙은 두 개의 이미지 링크가 포함된 "images" div 요소의 콘텐츠를 중앙에 정렬합니다.

마지막으로 수정된 CSS 코드에서 참조되는 공통 클래스 이름인 "fblogo"를 두 이미지 모두에 제공하도록 HTML 코드를 업데이트해야 합니다. 수정된 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>

로그인 후 복사

이러한 수정을 통해 이제 두 이미지가 중앙에 정렬되어 나란히 표시됩니다.

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