css - 텍스트 - 이미지 높이 맞추기




이미지 옆에 세로로 텍스트 정렬? (14)

vertical-align: middle 하지 않는 이유는 무엇입니까? vertical-align: middle 작업입니까? 그럼에도 vertical-align: top 효과적입니다.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

기본적으로 CSS3에 도달해야합니다.

-moz-box-align: center;
-webkit-box-align: center;

다음은 수직 정렬을위한 간단한 기법입니다.

한 줄 수직 정렬 : 중간

이 방법은 쉽습니다 : 텍스트 요소의 선 높이를 컨테이너의 선 높이와 같게 설정하십시오

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

여러 줄 수직 정렬 : 아래쪽

컨테이너와 관련하여 내부 div를 절대 배치하십시오.

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

여러 줄 세로 정렬 : 중간

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

고대 버전의 IE <= 7을 지원해야하는 경우

이 기능을 제대로 활용하려면 CSS를 약간 해킹해야합니다. 다행히 IE 버그가 있습니다. top:50% 설정 top:50% 컨테이너와 top:-50%top:50% top:-50% 내부 div에 top:-50% , 당신은 동일한 결과를 얻을 수 있습니다. IE가 지원하지 않는 또 다른 기능인 고급 CSS 선택기를 사용하여 두 가지를 결합 할 수 있습니다.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

가변 컨테이너 높이 수직 정렬 : 중간

이 솔루션은 transform: translateY 속성을 사용하므로 다른 솔루션보다 약간 더 최신 브라우저가 필요합니다. ( http://caniuse.com/#feat=transforms2d )

다음 세 줄의 CSS를 요소에 적용하면 부모 요소의 높이에 관계없이 부모 요소 안에 세로로 가운데가 배치됩니다.

position: relative;
top: 50%;
transform: translateY(-50%);

당신은 아마 이것을 원할 것입니다 :

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

다른 사람들이 제안했듯이 이미지에서 vertical-align 을 시도하십시오.

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS는 짜증나 지 않습니다. 당신은 단지 문서를 읽지 않습니다. ;피


당신이 할 수있는 또 다른 일은 텍스트의 line-height<div> 안에있는 이미지의 크기로 설정하는 것입니다. 그런 다음 이미지를 vertical-align: middle; 로 설정하십시오 vertical-align: middle;

그것은 가장 쉬운 방법입니다.


사실,이 경우 매우 간단합니다 : 수직 정렬을 이미지에 적용하십시오. 모두 한 줄에 있기 때문에 텍스트가 아니라 실제로 정렬하려는 이미지입니다.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

FF3에서 테스트되었습니다.

이제이 유형의 레이아웃에 flexbox를 사용할 수 있습니다.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


수락 된 답변에 사용 된 기술은 한 줄짜리 텍스트 ( demo )에만 적용되지만 여러 줄 텍스트 ( demo )에는 사용할 수 없습니다.

누구나 이미지에 여러 줄의 텍스트를 세로로 배치해야하는 경우 다음과 같은 몇 가지 방법이 있습니다 (방법 1과 2는 CSS-Tricks에서 영감을 얻은 것입니다)

방법 # 1 : CSS 테이블 ( FIDDLE ) (IE8 + ( caniuse ))

CSS :

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

방법 # 2 : 컨테이너상의 유사 요소 ( FIDDLE ) (IE8 +)

CSS :

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

방법 # 3 : 플렉스 박스 ( FIDDLE ) ( caniuse )

CSS (위의 바이올린은 공급 업체 접두사를 포함합니다) :

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

예를 들어, jQuery 모바일의 버튼에서이 스타일을 이미지에 적용하여 약간 조정할 수 있습니다.

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

우선 인라인 CSS 는 전혀 추천하지 않습니다. HTML을 정말 엉망으로 만듭니다.

이미지와 스팬을 정렬하려면 vertical-align:middle 됩니다.

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>


이 작업을 수행하려면 line-height 를 div line-height 로 설정해야하기 때문에


이 코드는 IE뿐만 아니라 FF에서도 작동합니다.

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

혼란 스러울 수 있습니다. 표 기능을 사용해보십시오. 이 간단한 CSS 속임수를 사용하여 웹 페이지 중앙에 모달을 배치합니다. 그것은 큰 브라우저를 지원합니다 :

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

및 CSS 부분 :

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

이미지 및 테이블 컨테이너의 크기를 스타일에 맞게 조정해야 원하는대로 작동 할 수 있습니다. 즐겨.


display 속성을 사용하여 이미지를 inline element 로 설정할 수 있습니다.

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>


vertical-align: middle 두 요소를 vertical-align: middle 에 배치하여 완벽하게 vertical-align: middlevertical-align: middle 합니다.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

허용 된 대답 은 CSS 스펙에 정의 된대로 텍스트 옆에있는 x 높이의 아이콘 주위에 아이콘을 배치합니다. 어느 쪽이 좋을지 모르지만 텍스트가 위쪽이나 아래쪽에 서있는 오름차순 자나 디 센더를 가진 경우 약간 벗어날 수 있습니다.

왼쪽에는 텍스트가 정렬되지 않고 오른쪽에는 위에 표시된 것과 같습니다. 라이브 데모는이 기사 에서 수직 정렬에 대한 내용을 볼 수 있습니다.

vertical-align: top 시나리오에서 vertical-align: top 작품에 대해 이야기 한 사람이 있습니까? 질문의 이미지가 텍스트보다 크고 따라서 선 상자의 위쪽 가장자리를 정의합니다. vertical-align: top span 요소의 vertical-align: top 위에 놓은 다음 줄 상자의 맨 위에 배치합니다.

vertical-align: middletop 사이의 동작의 주된 차이점은 첫 번째 요소가 상자의 기준선 (모든 수직 정렬을 수행하는 데 필요한 위치에 있으므로 예측할 수없는 경우 )에 상대적으로 요소를 이동하고 두 번째 요소는 라인 박스 (더 실체적임).


background:url(../images/red_bullet.jpg) left 3px no-repeat;

일반적으로 top 대신 3px를 사용합니다. 이 값을 높이거나 낮추면 이미지를 필요한 높이로 변경할 수 있습니다.





vertical-alignment