Vertical align span inside div

css, html

Solution

Update you CSS to

.container {
  width: 100%;
  height: 50px;
  display: table-cell;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

.container span {
}

Problem

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

Original source

Related problems