Vertical center multiple lines

Question

I need to center the content of an li vertically so what i did is a lineheight and it works but the problem is that when I have multiple lines, this technique no longer works and i can't modify the html since it's a constraint given by the professor. So i really ran out of solutions.

Here is the HTML And the Css

    li
    {
    
        
     list-style-type:none; 
     border-bottom: 1px solid #e0e0e0;
     height: 55px;
     display: inline-block;
        vertical-align: middle;
        width: 100%;
        line-height: 55px;
    
    }
    ul
    {
     list-style : none;
      
    }

<ul>
     <li>
             The 2015–16 UEFA Champions League was the 61st season of Europe's premier club football tournament organised by UEFA, and the 24th season since it was renamed from the European Champion Clubs' Cup to the UEFA Champions League
          
       </li>
  
    </ul>

You'll have to use one of the other 4 or 5 techniques for vertically centering your content. They're all well covered in many questions on SO. — Alohci, May 31 '16 at 13:11

Andrei · Answer 1 · 2016-06-01T07:49:32.110

0

.parent {
  display: table;
  height:  260px;
  width:   180px;
  padding: 10px;
  border:  2px solid darkgray;
}
.parent li {
  border:1px solid blue;
  display:        flex;
  vertical-align: middle;
  padding:8px;
}

<ul class="parent">
  <li>Something about Footbal</li>
  <li>Something about Footbal</li>
  <li>Something about Footbal</li>
</ul>

The position of the child element is related to his parent's display property. If the parent will have display:table , the child will have display:table-cell and vertical-align:middle.

We have more examples here and also here

edited Jun 01 '16 at 07:49

answered May 31 '16 at 13:13

Andrei

39
8

So just copy-paste the answer that you saw in the other question? – dippas May 31 '16 at 13:14
Repetition is the mother of all learning :) – Andrei May 31 '16 at 13:15
one thing is repeating, the other is copy-pasting the code. – dippas May 31 '16 at 13:16
Ah , now i understood what do you mean dippas . Sorry , i edit now the answer – Andrei May 31 '16 at 13:19
It's working but now my li are next to each other – Brandon Jose Jun 01 '16 at 06:05
But i want to have each li under each other li – Brandon Jose Jun 01 '16 at 06:11
Take a look now at the Snippet Brandon – Andrei Jun 01 '16 at 07:50

Vertical center multiple lines

1 Answers1