div 내에서 세로 및 가로 가운데 정렬

Question

여기에 도움이 필요합니다. 나는 그것을 몇 시간 동안 올바르게하려고 노력하고 있었고 효율적인 해결책을 찾을 수 없었다.

<div id="Header"> 
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg' 
/> 
<h1>siajdasdasdasd</h1> 

<p>sdhaosidasdas</p> 

는

Example of what im trying to do 난 좌측 중앙에 정렬 타이틀 정렬 화상을 갖는 액 헤더를 갖고 싶어하지만, 그들 모두는 중앙에 정렬 할 높이, img/div의 높이를 늘리면 아무 mather가 될까?

Answer 1

:

<div id="Header" class="table"> 
    <div class="row"> 
     <div class="cell"> 
      <img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/> 
     </div> 
     <div class="cell main"> 
      <h1>siajdasdasdasd</h1> 
      <p>sdhaosidasdas</p> 
     </div> 
    </div> 
</div> 

#Header { 
    background: #DBE6EC; 
    border-bottom: 1px solid #595959; 
    position:relative; 
    padding:15px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.table { 
    display:table; 
    width:100%; 
} 

.row { 
    display:table-row; 
} 

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

.cell.main { 
    width:100%; 
} 

업데이트 된 바이올린은 here입니다. 이 솔루션은 ie7에서 작동하지 않습니다. ie7을 지원해야하는 경우 vertical align middle에 대한 더 오래된 해결 방법이 있습니다.

Answer 2

더 많은 div를 추가해야했지만 작동합니다. http://jsfiddle.net/74Rnq/23/

HTML :

<div id="Header"> 
    <div class="wrap"> 
     <img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/> 
     <div class="text"> 
      <h1>siajdasdasdasd</h1> 
      <p>sdhaosidasdas</p> 
     </div> 
    </div> 
</div> 

CSS : 테이블, 테이블 행의 테이블 셀 :

이처럼 HTML을 수정 현대는 디스플레이를 통해 그것을 할 수 있습니다 브라우저의

#Header { 
    position: relative; 
    height: 200px; 
    padding: 15px; 
    background: #DBE6EC; 
    border-bottom: 1px solid #595959; 
    overflow: auto; 
} 
#Header h1, p { 
    text-align: center; 
    letter-spacing: -1px; 
    text-align: center; 
    font-size: 2em; 
    color: #1F1F1F; 
} 
#Header p { 
    font-size: 1em; 
} 
#Header img { 
    float: left; 
    max-height:100px; 
} 

#Header .wrap { 
    display: block; 
    position: absolute; 
    width: 100%; 
    top: 50%; 
    margin-top: -50px; /* Half of wrap div height */ 
} 

#Header .wrap .text { 
    position: absolute; 
    top: 50%; 
    margin-top: -27.5px; /* Half of text div height */ 
    width: 100%; 
} 

Answer 3

컨테이너 div display: table-cell과 각 하위 div display: table-cell을 만듭니다. 그런 다음 하위 div에 vertical-align: middle을 줄 수 있으며, 항상 세로로 가운데에 배치됩니다.

는 HTML :

<div id="Header"> 
    <div id="image"> 
     <img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg' /> 
    </div> 
    <div id="title"> 
     <h1>siajdasdasdasd</h1> 
     <p>sdhaosidasdas</p> 
    </div> 
</div> 

및 CSS :

#Header { 
    padding: 15px; 
    background: #DBE6EC; 
    border-bottom: 1px solid #595959; 
    display: table; 
} 
#Header h1, p { 
    text-align: center; 
    letter-spacing: -1px; 
    font-size: 2em; 
    color: #1F1F1F; 
} 
#Header p { 
    font-size: 1em; 
} 
#Header img { 
    float: left; 
    max-height:100px; 
} 
#title{ 
    display: table-cell; 
    vertical-align: middle;  
    width: 100%; 
} 
#image{ 
    display: table-cell; 
    vertical-align: middle; 
} 

Aaand 여기 jsFiddle입니다.