Img(인라인) 수직정렬

a태그 안에 img, button태그 안에 img.. 

img 태그를 넣을 때 대부분 수직정렬을 고민하게 된다.

왜 이렇게 정렬이 복잡할까 싶지만 어쨌든 정리의 필요가 있다.

1. line-height 사용

행간 길이를 조정하는 line-height를 정렬을 목적으로 많이 사용한다.

단 2줄 이상의 텍스틀르 정렬하는 경우 line-height만큼 간격이 생기니 주의해야 한다.

이 방법은 바깥 영역의 height가 고정일 경우 주로 사용한다.

<div class="img-wrapper">
      <img src="icon_user_16.png" alt="">
    </div> 

.img-wrapper{
  /*기본세팅*/
  width : 200px;
  height: 200px;
  text-align:center;
  background-color: gold;

  /*여기부터*/
  line-height:200px;
}

2. table-cell 사용

display:table 안에 display:table-cell 요소로 img를 감싼 후 vertical-align:middle을 적용하는 방법.

장점

1) 높이가 변해도 상관없다.

2) wrapper에 공간이 없어도 콘텐츠가 잘리지 않는다.

단점

1) IE에서 작동하지 않는다.

<div class="img-wrapper-table">
      <div class="div-table-cell">
        <img src="icon_user_16.png" alt="">
      </div>
    </div> 

.img-wrapper-table{
  /*기본세팅*/
  width : 200px;
  height: 200px;
  text-align:center;
  background-color: gold;

  /*여기부터*/
  display:table;
}

.div-table-cell{
  display:table-cell;
  vertical-align: middle;
}




3. position:absolute를 이용한 방법




1) top을 50%로 설정한 후, margin-top을 콘텐츠의 절반 높이만큼 음수로 적용

<div class="img-wrapper absolute1">
      <img class="contents" src="icon_user_16.png" alt="">
</div>

.absolute1 {
  position:relative;
}

.absolute1 .contents{
  position:absolute;
  top : 50%;
  left : 50%;
  margin-top:-8px;
  margin-left:-8px;
}

2) top을 50%로 설정한 후, transfrom으로 콘텐츠 높이의 50%만큼 반대로 이동시키는 방법.

<div class="img-wrapper absolute2">
      <img class="contents" src="icon_user_16.png" alt="">
</div>

.absolute2 {
  position:relative;
}

.absolute2 .contents{
  position:absolute;
  top : 50%;
  left : 50%;
  transform : translateY(-50%) translateX(-50%);
}

3) top:0 ~ bottom:0까지 (상위요소의 양 끝단까지) 설정해서, 콘텐츠의 크기를 조정 못하니 알아서 중앙으로 이동시키는 방법. margin:auto를 줘야 작동한다.

<div class="img-wrapper absolute3">
      <img class="contents" src="icon_user_16.png" alt="">
</div>

.absolute3 {
  position:relative;
}

.absolute3 .contents{
  position:absolute;
  top : 0;
  left : 0;
  bottom : 0;
  right : 0;
  margin:auto;
}

3. float을 이용한 방법




콘텐츠 위의 더미 요소를 이용하여 정렬하는 방법.

<div class="img-wrapper float1">
      <div class="float1-dummy"></div>
      <img class="contents" src="icon_user_16.png" alt="">
</div>

.float1-dummy{
  float:left; height:50%; width:100%; margin-bottom:-8px;
}

.float1 .contents {
  clear:both; position:relative;
}