How do I keep CSS vertical alignment without text overflowing?

Question

I have a div in my site where I want text to be vertically aligned, here's some of the CSS

overflow-y:auto;
font-size: 150%;
justify-content: center;
flex-direction: column;
display:flex;
height:350px !important;
overflow-y:auto;

This works well when the text is short, but when it's long it gets cut off

possible duplicate of [css single or multiple line vertical align](http://stackoverflow.com/questions/9192389/css-single-or-multiple-line-vertical-align) — Maximillian Laumeister, Sep 23 '15 at 20:04

score 0 · Answer 1 · answered Sep 23 '15 at 19:56

Have you tried using display: table-cell instead?

Also, you don't need !important;

HTML:

<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna felis, porttitor eu porttitor at, mattis a ante. Suspendisse vitae porttitor tellus. Vivamus eget laoreet ligula, vitae dignissim ex. Phasellus accumsan porttitor lectus, non accumsan 
</div>

CSS:

.content {
    display: table-cell;
    vertical-align:middle;
    width:200px;
    height:350px;
    background: #ff0000;
}

JS Fiddle: http://jsfiddle.net/9ppf5xdg/

score 0 · Answer 2 · answered Sep 23 '15 at 20:01

Try using:text-align: center;

that alone should work just fine

I put 2 deferent div's one with a percentage width, with a shorter text and the other with a set px width, with a longer text.

div{
  background-color: royalblue;
  width: 50%;
  text-align: center;
  margin:2px;
}

.d{
  background-color: royalblue;
  width: 250px;
  text-align: center;
  margin:2px;
}

<div>Sup World</div>
<div class='d'>Sup World Sup World</div>

How do I keep CSS vertical alignment without text overflowing?

2 Answers2