부트 스트랩 세로 맞춤 머리글

-2

많은 것을 시도하고 여기에 몇 가지 해답을 보았지만 작동하지 않았습니다. 헤더를 이미지에 세로로 정렬하려고합니다. http://www.bootply.com/SEKp0kHvfX 부트 스트랩 세로 맞춤 머리글

편집 : 나의 Bootply에서 봐 주시기 바랍니다 여기에 또한 코드입니다 :

<div class="container"> 
    <div class="row"> 
<div class="col-md-2"> 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=150&amp;h=150"> 
</div> 
<div class="col-md-4"> 
    <h2>Please align me! :)</h2> 
</div>  
    </div> 
</div>

편집 : 부정확 한 것에 대해 죄송합니다. 이미지의 중간 높이에 헤더가 있어야합니다.

그것은 다음과 같아야합니다

+----------------------+ 
|      | 
|      | 
| IMAGE    | Header 
|      | 
|      | 
+----------------------+

출처

2016-10-14 MaxMara

부모를 공유하지 않는 요소를 정렬하는 CSS 방법은 없습니다. 플러스 ... 수직 정렬 방법 .... 상단, 중간 ... 하단 ... * 무엇 *? –

부모님이 "행"이라고 생각 했나요? – MaxMara

아니요 ... 부모는 ** 상단에 ** 정렬 된 열 div입니다. 이미지와 표제는 행이 아닌 각 열의 자식입니다. –

-2

.vcen { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    float: none; 
 
}

이
부트 스트랩과 같은 사용자 정의 CSS를 만들 플로트를 사용하여 기본

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-2 vcen"> 
 
\t \t <img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=150&amp;h=150"> 
 
    </div> 
 
\t <div class="col-md-4 vcen"> 
 
    \t \t <h2>Please align me! :)</h2> 
 
    </div> 
 
    </div>  
 
</div>

0123로 남겨

시험해보세요.
희망이 도움이됩니다.

출처

2016-10-14 13:52:59 prophet1906

나는 OP가 이미지의 오른쪽에 텍스트를 배치하고 중간에 텍스트를 배치하기를 원합니다. 텍스트를 새 행 (이미지 아래)으로 밀어 넣었습니다. – hungerstar

아니요, 죄송합니다. 나는 한 줄에 그것을 원한다. – MaxMara

OP의 질문은 전혀 명확하지 않다. – prophet1906

부트 스트랩 세로 맞춤 머리글

답변

관련 문제