垂直对齐跨度div [英] Vertical align span inside div

问题描述

http://jsfiddle.net/UmHNL/2/

 < div class =container> 
 
< span>一些文字，yay< / span> 
 
< / div> 
 
< div class =container> 
 
< span>一些文字，yay。但是shit时间，有很多文本，所以我们得到一个问题，打破线和给定的高度:(如何可以对齐垂直现在？< / span> 
 
< / div> 
< style> 
 .container {
 width：100％; 
 height：50px; 
 line-height：50px; 
 border：1px ; 
} 
 
 .container span {
 padding-left：30px; 
} 
< / style> 
  
 
 
 
这个解决方案工作得很好，直到屏幕宽度太小 - 将我的文本分成几行。
 
 
 
当我google的问题，我发现这么多疯狂的过于复杂的解决方案，javascript和divs推动我的内容到位..任何人都可以帮助我做这个工作，而不添加更多的标记？：）
 
 
 
不需要支持Internet Explorer和旧版浏览器。
 
 
 
感谢
解决方案
将CSS更新为
  .container {
 width： 100％; 
 height：50px; 
 display：table-cell; 
 border：1px solid black; 
 text-align：center; 
 vertical-align：middle; 
} 
 
 .container span {
} 
  
 
http://jsfiddle.net/UmHNL/2/
<div class="container">

    <span>Some text, yay</span>

</div>

<div class="container">

    <span>Some text, yay. But shit time, there is alot of text, so we get a problem with breaking lines and the given height :( How can I align vertical now?</span>

</div>
<style>
.container {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 1px solid black;
}

.container span {
    padding-left: 30px;
}
</style>
This solution works great until the screen-width is too small - breaking my text into several lines.

When I google the problem I find so many crazy over-complicated solutions with javascript and divs to push my content in place.. Can anyone help me make this work without adding more markup? :)

There's no need to support Internet Explorer and older browsers.

Thanks
解决方案
Update you CSS to
.container {
  width: 100%;
  height: 50px;
  display: table-cell;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

.container span {
}


                        
这篇关于垂直对齐跨度div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！