HTML 수직 센터 H1

Question

나는 두 인라인 div에 포함이 HTML이 :

div.inline { 
 
    display: inline-block; 
 
}

<div class="inline"> 
 
    <img src="http://via.placeholder.com/350x150" /> 
 
</div> 
 

 
<div class="inline"> 
 
    <h1 class="title"> TOPIC </h1> 
 
</div>

이미지 HTML과 h1 측면 올바르게 측면을 표시됩니다. 이제 h1을 세로 가운데에 배치하고 싶습니다. 이럴 필요가 있습니다.

+----------+ 
|   | 
| IMG | TOPIC 
|   | 
+----------+ 

어떻게해야합니까?

Answer 1

는 참조 용 플렉스

.container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div class="inline"> 
 
\t \t <img src="http://via.placeholder.com/350x150" /> 
 
    </div> 
 

 
\t <div class="inline"> 
 
\t \t <h1 class="title"> TOPIC </h1> 
 
\t </div> 
 
</div>

를 사용할 수 있습니다 적용에게 두 번째 사업부에 https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 2

그냥 클래스에 vertical-align: middle;를 추가 (display이 inline-block 때 작동) : 그것은 수평으로 요소를 정렬하므로

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

<div class="inline"> 
 
    <img src="http://placehold.it/120x120/fe2" /> 
 
</div> 
 

 
<div class="inline"> 
 
    <h1 class="title"> TOPIC </h1> 
 
</div>

이

Answer 3

간단히 vertical-align:middle를 사용합니다.

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

<div class="inline"> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwswZVnaDs2Sn9AyTVbEhdfGc3cCr3tbh_tiytTGd_cJf1d8_a" /> 
 
</div> 
 

 
<div class="inline"> 
 
    <h1 class="title"> TOPIC </h1> 
 
</div>

Answer 4

이 스타일 :

을 CSS에서

div.inline{ 
    vertical-align: middle; 
} 

Answer 5

중고 인라인 높이 속성

inline-height:500px; // height of parents div