Question

我需要将li的内容垂直居中，所以我所做的是lineheight并且它有效但问题是当我有多行时，此技术不再有效且我{ {1}} can't modify，因为这是教授给出的约束。所以我真的用完了解决方案。

以下是html和HTML

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;
    	 
    }

Answer 1

.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

垂直中心多条线

1 个答案: