CSS에서 이미지와 텍스트를 수직으로 가운데에 맞추는 방법은 무엇입니까?

작업할 때 레이아웃에 그림과 텍스트를 자주 사용하지만 주의 깊은 친구들은 HTML이 기본적으로 상단에 그림을 정렬하고 하단에 텍스트를 정렬하므로 그림이 높고 텍스트가 낮을 때 정렬할 수 없다는 것을 알게 될 것입니다. 중심. 페이지를 아름답게 만들기 위해 우리는 그림과 텍스트의 정렬을 설정하는 데 익숙합니다. 그렇다면 CSS에서 텍스트와 그림의 수직 중심을 어떻게 설정합니까? 텍스트와 이미지를 세로 중앙에 배치하는 방법은 무엇인가요?

방법 1: 간단하고 투박한 방법으로, CSS 속성 Vertical-align: middle을 직접 사용합니다. 코드는 다음과 같습니다.

<img  src="/static/imghwm/default1.png"  data-src="img/second_logo.png"  class="lazy"     style="max-width:90%"/ alt="CSS에서 이미지와 텍스트를 수직으로 가운데에 맞추는 방법은 무엇입니까?" ><a href="#">哈哈哈</a>

Rendering:

방법 2: 이미지가 배경 이미지를 통해 추가됨 예, 배경, line-height=height 설정을 사용하여 텍스트와 이미지의 수직 중앙 정렬을 달성할 수 있습니다. 코드는 다음과 같습니다:

HTML 부분:

<div class="aa">
   <a href="">哎呦呦</a>
</div>

CSS 부분:

.aa{
       width: 200px;
       height: 100px;
       line-height: 100px;          
       background: url(img/pic4.png) no-repeat left center;          
      }
.aa a{padding-left: 80px;}

Rendering:

방법 3: 이미지와 텍스트가 두 개의 다른 div에 배치된 경우 다음을 표시할 수 있습니다. 인라인 - block 및 Vertical-align: middle은 이미지와 텍스트를 수직으로 중앙에 배치하도록 설정됩니다. 코드는 다음과 같습니다.

HTML 부분:

<div>
    <div class="aa"><img  src="/static/imghwm/default1.png"  data-src="img/pic1.png"  class="lazy"   alt="CSS에서 이미지와 텍스트를 수직으로 가운데에 맞추는 방법은 무엇입니까?" ></div>
    <div class="bb"><a href="">啦啦啦</a></div>
</div>

CSS 부분:

.aa{
    display: inline-block;
    vertical-align: middle;
    }
 .bb{
     display: inline-block;
     }

Rendering:

요약: 위에서 소개합니다. 그림과 텍스트를 세로로 가운데에 배치하는 방법은 페이지 레이아웃에 따라 사용하는 방법이 다릅니다. 이 튜토리얼이 도움이 되기를 바랍니다.

위 내용은 CSS에서 이미지와 텍스트를 수직으로 가운데에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!