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

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

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

원래 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!