垂直和水平中心在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内对齐

回答

相关问题