垂直中心多條線

我需要垂直居中li的內容，所以我做的是lineheight，它的工作原理是，但問題是，當我有多條線時，這種技術不再有效，我can't modifyhtml因爲它是這是教授給出的一個約束。所以我真的用盡瞭解決方案。垂直中心多條線

這裏是HTML而且Css

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

<ul> 
 
    \t <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>

來源

2016-05-31 Brandon Jose

垂直對齊方式？ –

是垂直對齊 –

您必須使用其他4或5種技術之一來垂直居中您的內容。他們都很好地覆蓋了許多關於SO的問題。 – Alohci

.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>

子元素是關係到他父母的財產display的位置。如果父母有display:table，孩子將有display:table-cell和vertical-align:middle。

我們有更多的例子here也here

來源

2016-05-31 13:13:44 Andrei

那麼只需複製粘貼在其他問題中看到的答案？ – dippas

重複是所有學習的母親:) – Andrei

有一件事是重複的，另一件事是複製粘貼代碼。 – dippas

垂直中心多條線

回答

相關問題