[HTML / CSS] 이미지(div) 수평&수직 가운데 정렬하기

홈페이지를 개발하다보면 여러 div를 한 라인에 표시하고 싶은 경우가 발생합니다. 

 

문제는 div의 높이가 서로 다르면, 높이가 낮은 div는 자연스레 페이지 위로 붙게 됩니다.

 

 

 

 

아래 코드를 구현하면 위와 같은 상태가 됩니다.

 

제가 간단하게 사용하려고 만들던 코드라 Bootstrap이 적용되어 있는데 무시하여 주시고, 아래 주석으로 작성된 'div A'와 'div B'만 주목하시면 됩니다.

 

현재 'div A'안의 내용이 길어지면서 'div B'의 이미지가 상대적으로 위에 붙은 것과 같은 형태를 띄고 있습니다.

 

이제부터 div B에 있는 내용(이미지)를 수직/수평 정렬해보도록 하겠습니다.

<div class="my-3" style="padding-top: 40px">
  <div class="card border-primary">
    <div class="row card-body">
      <div class="col-sm my-3"> <!-- div A -->
        <h3 class="card-title"><b>AngelPlayer</b></h3>
        <p>
          <br>
            Lorem ipsum dolor sit amet co...
            Lorem ipsum dolor, sit amet c...
            Lorem ipsum dolor sit amet, c...
          <br>
        </p>
      </div>
      <div class="col-sm my-3"> <!-- div B -->
        <img src="https://avatars.githubusercontent.com/u/26498125?v=4" width="300" height="300">
      </div>
    </div>
  </div>
</div>

 

 

 

수평 가운데 정렬

수평 가운데 정렬은 매우 쉽습니다.

 

가운데 맞추고자 하는 내용(이미지)를 포함하는 상위 div의 style 속성을 "text-align: center"로 주시면 됩니다.

 

(※ 간단하게 하나의 파일로 보여드리고자 별도의 css 파일을 만들지 않았습니다. div에 class 명을 주고 따로 css로 설정하셔도 동일하게 나옵니다.)

<div class="my-3" style="padding-top: 40px">
  <div class="card border-primary">
    <div class="row card-body">
      <div class="col-sm my-3"> <!-- div A -->
        <h3 class="card-title"><b>AngelPlayer</b></h3>
        <p>
          <br>
            Lorem ipsum dolor sit amet co...
            Lorem ipsum dolor, sit amet c...
            Lorem ipsum dolor sit amet, c...          
          <br>
        </p>
      </div>
      <div class="col-sm my-3" style="text-align: center"> <!-- div B -->
        <img src="https://avatars.githubusercontent.com/u/26498125?v=4" width="300" height="300">
      </div>
    </div>
  </div>
</div>

 

 

위 코드를 실행하면 아래와 같이 이미지가 수평 가운데 정렬이 제대로 수행된 것을 확인할 수 있습니다.

 

 

 

수직 가운데 정렬

해당 문제를 해결하는 방법은 여러가지가 있지만, 저는 flex를 이용한 방법이 가장 쉽고 잘 작동하기 때문에 해당 방법을 사용합니다.

 

수직 정렬할 div B에 style 속성에 추가적으로 "display: flex; justify-content:center;"를 줍니다.

<div class="my-3" style="padding-top: 40px">
  <div class="card border-primary">
    <div class="row card-body">
      <div class="col-sm my-3"> <!-- div A -->
        <h3 class="card-title"><b>AngelPlayer</b></h3>
        <p>
          <br>
            Lorem ipsum dolor sit amet co...
            Lorem ipsum dolor, sit amet c...
            Lorem ipsum dolor sit amet, c...
		  <br>
        </p>
      </div>
                                                                                    <!-- div B -->
      <div class="col-sm my-3" style="align-items:center; display: flex; justify-content:center;"> 
        <img src="https://avatars.githubusercontent.com/u/26498125?v=4" width="300" height="300">
      </div>
    </div>
  </div>
</div>

 

 

 

코드를 수정하고 확인해보시면 수평 및 수직 정렬이 제대로 이루어진 것을 확인할 수 있습니다.