> 웹 프론트엔드 > CSS 튜토리얼 > 두 이미지를 나란히 가운데에 배치하는 방법은 무엇입니까?

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

DDD
풀어 주다: 2024-11-02 00:39:31
원래의
602명이 탐색했습니다.

How to Center Two Images Side by Side?

두 개의 이미지를 나란히 배치

두 개의 이미지를 가로 중앙에 맞추려고 할 때 이미지가 세로로 정렬되어 나타나는 문제가 발생하는 것이 일반적입니다. . 이 문제를 해결하려면 다음을 고려하십시오.

원래 CSS:

<code class="css">#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}</code>
로그인 후 복사

개선된 CSS:

<code class="css">.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

#images{
    text-align:center;
}</code>
로그인 후 복사

변경 사항:

  • 디스플레이 교체: 블록 with display: inline-block.
  • ID 선택기 #fblogo를 제거하고 대신 클래스 선택기 .fblogo를 사용하세요.
  • ID 이미지와 텍스트 정렬 속성이 다음으로 설정된 새 div를 추가하세요. 센터입니다.

수정됨 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>
로그인 후 복사

이러한 수정을 통해 이미지가 이미지 div 내에서 인라인으로 표시되고 상위 컨테이너 내에서 가로 중앙에 배치됩니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿