CSS centre text on multiple lines

Question

I need to apply some text within a div horizontally and vertically, which was working fine with this solution that has been posted on stack overflow before -

text-align: center;
vertical-align: middle;
line-height: 90px;   

/* the same as your div height */

My issue is that I have multiple lines and I am wrapping the words onto a new line with -

white-space: normal;

My text is within a button so i need this line to counteract the btn class that will not allow for text to wrap normally.

However when I do this there will now be a huge gap inbetween my lines of 90px, as you'd expect. Is there a way to get around this? Or another way to centre my text?

If you were using that method to vertically center your text, then your container must have had a fixed height of 90px, correct? (Vertical-align: middle does nothing here in terms of centering the text.) — Adam Jenkins, Jun 17 '15 at 15:06
possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Stickers, Jun 17 '15 at 15:25

score 4 · Answer 1 · answered Jun 17 '15 at 15:21

CSS tables work quite well

div {
  height: 250px;
  border: 1px solid #000;
  display: table;
}
p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at efficitur nulla. Suspendisse potenti. Ut viverra velit in lobortis euismod. Mauris cursus mollis porta. Praesent ullamcorper imperdiet placerat. Nam sit amet aliquam leo. Ut a facilisis
    ex, ut fermentum felis</p>
</div>

score 2 · Answer 2 · answered Jun 17 '15 at 15:05

Sans flexbox approach:

Give your container element a line-height equal to it's known height and then give a child element that contains the text a line-height of 1 (or whatever is desirable). Make sure to set the child to display: inline-block

div { height: 250px; line-height: 250px; border: 1px solid #000;}
span { line-height:1; display: inline-block;}

<div>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at efficitur nulla. Suspendisse potenti. Ut viverra velit in lobortis euismod. Mauris cursus mollis porta. Praesent ullamcorper imperdiet placerat. Nam sit amet aliquam leo. Ut a facilisis ex, ut fermentum felis</span>
</div>

score 0 · Answer 3 · answered Jun 17 '15 at 15:05

0

Use flexbox:

<div id="container">
<div class="content">Multi line content centered both vertically and horizontally. You can use block elements & images too.</div>
</div>

Css is simple:

#container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 90px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

More info: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

answered Jun 17 '15 at 15:05

passatgt

4,234
4
40
54

ie9 is 1.29% global, ie10 works, so i don't see an issue using it. – passatgt Jun 20 '15 at 18:29
That's approximately 1 in every 77 people who visit the website. If you get 10000 visitors, that's 130 people who won't be able to use your website. If you're en e-commerce website that's a lot of potential money lost because your website isn't optimized. – Jamie Barker Jun 20 '15 at 18:43

CSS centre text on multiple lines

3 Answers3