이미지 옆에 텍스트를 수직으로 정렬합니까?

StackOverflow https://stackoverflow.com/questions/489340

  •  20-08-2019
  •  | 
  •  

문제

왜 그렇지 않습니다 vertical-align: middle 일하다? 그럼에도 불구하고 vertical-align: top 하다 일하다.

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

도움이 되었습니까?

해결책

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

<!-- 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>

다른 팁

수직 정렬을위한 몇 가지 간단한 기술은 다음과 같습니다.

한 줄의 수직 정상 : 중간

이것은 쉬운 일입니다 : 텍스트 요소의 줄 높이를 컨테이너와 동일하게 설정합니다.

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</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% 내부 Div에서는 동일한 결과를 얻을 수 있습니다. 다른 기능을 사용하여 두 가지를 결합 할 수 있습니다. 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)

다음 3 줄의 CSS 라인을 요소에 적용하면 부모 요소의 높이에 관계없이 부모 내에서 수직으로 중앙에 있습니다.

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

당신의 변화 div 플렉스 컨테이너로 :

div {display:flex;}


이제 모든 컨텐츠의 정렬을 중심으로하는 두 가지 방법이 있습니다.

방법 1 :

div {align-items:center;}

데모

방법 2 :

div * {margin-top:auto; margin-bottom:auto;}

데모

다른 너비와 높이 값을 시도하십시오 img 및 다른 글꼴 크기 값 span 그리고 당신은 그들이 항상 컨테이너의 한가운데에 남아 있음을 알 수 있습니다.

당신은 신청해야합니다 vertical-align: middle 두 요소 모두에게 완벽하게 중심을 두었습니다.

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

그만큼 받아 들여진 답변 옆에있는 X- 높이의 절반에 아이콘을 중심으로 ( CSS 사양). 텍스트에 상승자 나 하강자가 상단 또는 하단에 서있는 경우에는 충분할 수 있지만 조금 벗어날 수 있습니다.

centered icon comparison

왼쪽에는 텍스트가 정렬되지 않으며 오른쪽에는 위와 같이 오른쪽에 있습니다. 이것에서 라이브 데모를 찾을 수 있습니다 수직 정렬에 관한 기사.

그 이유에 대해 이야기 한 사람이 있습니까? vertical-align: top 시나리오에서 작동합니까? 질문의 이미지는 아마도 텍스트보다 키가 크기 때문에 라인 상자의 상단 가장자리를 정의합니다. vertical-align: top 스팬 요소에서는 라인 상자 상단에 배치합니다.

행동 사이의 주요 차이 vertical-align: middle 그리고 top 첫 번째는 상자의 기준선에 대한 요소를 움직이는 것입니다 (모든 수직 정렬을 수행하는 데 필요한 곳에 배치되어 오히려 느낌이 듭니다. 예측할 수 없습니다)) 및 두 번째는 선 상자의 외부 경계 (보다 유형)에 대한 비교됩니다.

허용 된 답변에 사용 된 기술은 단일 라이닝 텍스트에만 작동합니다 (데모), 그러나 멀티 라인 텍스트는 아닙니다 (데모) - 언급 한 바와 같이.

누군가가 이미지에 수직으로 중심적인 텍스트를 중심으로해야한다면 다음은 몇 가지 방법이 있습니다 (방법 1과 2에서 영감을 얻은 방법 1과 2 이 CSS- 트릭 기사)

방법 #1 : CSS 테이블 (깡깡이) (IE8+ (사용해도 되나요))

CSS :

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

방법 #2 : 컨테이너의 의사 요소 (깡깡이) (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 : Flexbox (깡깡이) (사용해도 되나요)

CSS (위의 바이올린에는 공급 업체 접두사가 포함되어 있습니다) :

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

이 코드는 IE와 FF에서 작동합니다.

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

당신은 설정해야하기 때문에 line-height 이것이 작동하기 위해 div의 높이에

기본적으로 CSS3로 내려 가야합니다.

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

레코드의 경우 정렬 "명령"은 스팬에서 작동하지 않아야합니다. 인라인 태그가 아닙니다 블록 레벨 꼬리표. 인라인 지점이 텍스트 흐름을 방해하지 않기 때문에 정렬, 마진, 패딩 등과 같은 것들이 인라인 태그에서 작동하지 않습니다.

CSS는 HTML 태그를 인라인 및 블록 레벨의 두 그룹으로 나눕니다. "CSS 블록 대 인라인"을 검색하고 훌륭한 기사가 나타납니다 ...

http://www.webdesignfromscratch.com/html-css/css-block-andinline/

(핵심 CSS 원칙을 이해하는 것은 그다지 짜증나 지에 대한 열쇠입니다)

사용 line-height:30px 텍스트가 이미지와 일치하도록하는 스팬의 경우 :

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

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

그것은 진지하게 가장 쉬운 방법입니다.

해결책을 보지 못했습니다 margin 이 답변 중 하나는 아직이 문제에 대한 나의 해결책이 있습니다.

이 솔루션 이미지의 너비를 알고있는 경우에만 작동합니다.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

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

나는 일반적으로 대신 3px를 사용합니다 top. 해당 값을 늘리거나 감소시킴으로써 이미지를 필요한 높이로 변경할 수 있습니다.

이 스팬 속성을 작성하십시오

span{
    display:inline-block;
    vertical-align:middle;
}

사용 display:inline-block; 당신이 사용할 때 vertical-align 속성. 그들은 암살 속성입니다

이미지를 다음과 같이 설정할 수 있습니다 inline element 사용 display 재산

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

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

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

다중 솔루션 :

http://jsfiddle.net/zh58l/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

모든 브라우저 및 IE9+에서 작동합니다

혼란 스러울 수 있습니다. 동의합니다. 테이블 기능을 사용해보십시오. 이 간단한 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; }

원하는대로 작동하도록 이미지 및 테이블 컨테이너의 크기를 스타일링하고 조정해야합니다. 즐기다.

첫 번째 인라인 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>

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

<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는 성가신 것이 아닙니다. 당신은 그냥 읽지 않습니다 문서. ;피

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top