Vertical align span inside div

Question

<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

Is [this](http://stackoverflow.com/a/18649137/1542290) what you want? — Mr. Alien, Feb 05 '14 at 12:49
@Mr. Alien I will see if that can work with the rest of the markup. This right here is a simplified version :) — , Feb 05 '14 at 12:57
To me it seems kind of "hacky". But it works! So I will delete this thread when you've read this. Thanks man! — , Feb 05 '14 at 13:12

osmanz · Answer 1 · 2015-09-02T15:13:31.697

12

You should try this:

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

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

edited Sep 02 '15 at 15:13

answered Feb 05 '14 at 13:12

osmanz

481
5
15

score 3 · Accepted Answer · answered Feb 05 '14 at 12:49

3

Update you CSS to

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

.container span {
}

answered Feb 05 '14 at 12:49

Ishank Gupta

1,575
1
14
19

but why you need `padding-left: 30px;` in the span, you have already centered the text in the .container and make sure you add `vertical-align: middle;` in the .container to vertically align the text. – Ishank Gupta Feb 05 '14 at 12:55
1

That didn't work, but saying that container is table, and the span table-cell worked better :) – Feb 05 '14 at 12:55
Sorry I linked the wrong fiddle and instead of editing the comment I hit delete :) – Feb 05 '14 at 12:55
Solution: http://jsfiddle.net/UmHNL/7/ – Feb 05 '14 at 12:56
1

@Johannes I don't think this is the solution because the second cell doesn't respect the height of 50px – Mihai Matei Feb 05 '14 at 12:58
@Johannes: I dont think we should change the display of span to `table-cell`, because it will break when you will add any other tag inside the .container and now I think we do not require any vertical-align as you are adding white space with padding. – Ishank Gupta Feb 05 '14 at 13:04

Vertical align span inside div

2 Answers2

Linked