垂直和水平中心在div內對齊

我需要一些幫助。我一直試圖讓它正確的幾個小時，我找不到一個有效的解決方案。垂直和水平中心在div內對齊

<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

我想有與左對齊和對準中心的標題的圖像的液頭，但兩者的EM必須對齊的中間高度，沒有mather如果我增加img/div的高度

來源

2013-02-02 Homeroe

對於現代的瀏覽器，你可以通過顯示屏做到這一點：表，錶行的表單元格：

修改你的HTML這樣的：

<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有一個較舊的解決方法。

來源

2013-02-02 20:09:52

嘿，謝謝！作品完美無瑕！ – Homeroe

不得不添加更多的divs，但它的作品。 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：

#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%; 
}

來源

2013-02-02 19:52:18

我已將#Header高度設置爲200px，以向您顯示它實際上居中它。 –

但是你的.text的高度是固定的。當你添加更多的文本時，它不再對齊。 – YoannM

是啊，我需要的文字居中，沒有媽媽多少我寫在那裏 – Homeroe

使容器分區display: table-cell和每個孩子分區display: table-cell。然後你可以給孩子div他們將永遠是垂直居中。

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。

來源

2013-02-02 20:13:56 symlink

垂直和水平中心在div內對齊

回答

相關問題