如何在使用flexbox時使用li元素垂直居中文本？

Question

我有以下的菜單欄：

<ul> 
    <li><a>A</a></li> 
    <li><a>B</a></li> 
    <li><a>C</a></li> 
</ul> 

下面CSS：

ul { display: flex; flex-direction: row; height: 100%; } 
ul li { flex: 1, auto; text-align: center; } 
ul li a:hover { cursor: pointer; } 

我這樣做，這樣的填充左麗之間是相同的。但是現在很難將文本垂直居中。有什麼建議嗎？

我試圖在li中添加行高：2。但我不認爲這是解決方案。

謝謝。

Answer 1

你上面的CSS代碼給了我一個完全不同於上面描述的路線。菜單碰到對方。你爲什麼不按如下方式使用display: block/inline-block？

我添加了50px高度到ul和50px到ul li。爲了保持菜單項不同，我添加了margin-left：2px;

ul { 
 
    display: block; 
 
    flex-direction: row; 
 
    height: 50px; 
 
} 
 
ul li { 
 
    border: 1px solid #CCC; 
 
    display: inline-block; 
 
    flex: 1, auto; 
 
    line-height: 50px; 
 
    margin-left: 2px; 
 
    text-align: center; 
 
} 
 
ul li a:hover { 
 
    cursor: pointer; 
 
}

<ul> 
 
    <li><a>A</a></li> 
 
    <li><a>B</a></li> 
 
    <li><a>C</a></li> 
 
</ul>

Answer 2

你可以試試這個：

ul { 
    display: flex; 
    flex-direction: row; 
    height: 50px; 
} 
ul li { 
    flex: 1, auto; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 50px; 
    text-align: center; 
    list-style: none; 
    border: 1px solid lightblue; 
} 
ul li a:hover { 
    cursor: pointer; 
} 

DEMO FIDDLE

Answer 3

另一種解決方案是使用display: table-cell。試試下面的代碼片段：

ul li { 
 
    height: 50px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    list-style: none; 
 
    border: 1px solid lightblue; 
 
} 
 
ul li a:hover { 
 
    cursor: pointer; 
 
}

<ul> 
 
    <li><a>A</a></li> 
 
    <li><a>B</a></li> 
 
    <li><a>C</a></li> 
 
</ul>

你可以嘗試加入不同的高度，以測試它，如果你沒有設置高度（因爲你可能不知道），它會解決它將自動垂直對齊內容。

Answer 4

如果修復 「UL」 的高度，你可以很容易地使 '禮' 應用這些CSS

ul { 
 
    position: relative; 
 
    display: block; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 

 
ul li { 
 
    background-color:lightblue; 
 
    border: 1px solid #CCC; 
 
    display: inline-block; 
 
    text-align: center; 
 
    position:relative; 
 
    top: 50%; 
 
    -moz-transform: translatey(-50%); 
 
    -ms-transform: translatey(-50%); 
 
    -o-transform: translatey(-50%); 
 
    -webkit-transform: translatey(-50%); 
 
    transform: translatey(-50%); 
 
} 
 

 
ul li a:hover { 
 
    cursor: pointer; 
 
}

<ul> 
 
    <li><a>A</a></li> 
 
    <li><a>B</a></li> 
 
    <li><a>C</a></li> 
 
</ul>

Answer 5

試試這個垂直居中：

HTML（無變化）

<ul> 
    <li><a>A</a></li> 
    <li><a>B</a></li> 
    <li><a>C</a></li> 
</ul> 

CSS

html, body { height: 100%; } /* necessary if using percentage heights on child elements */ 

ul { 
    display: flex; /* establish flex container */ 
    flex-direction: column; 
    height: 100%; 
    padding: 0; /* for demo purposes */ 
    margin: 0; /* for demo purposes */ 
    background-color: #eaeaea; /* for demo purposes */ 
    border: 5px solid black; /* for demo purposes */ 
    font-size: 2em; /* for demo purposes */ 
} 

ul li { 
    flex: 1; /* distribute all available space evenly among flex items */ 
    margin: 10px; /* for demo purposes */ 
    border: 2px dashed red; /* for demo purposes */ 
    display: flex; /* make each flex item a flex container, as well */ 
    align-items: center; /* center text vertically (in this case) */ 
    justify-content: center; /* center text horizontally (in this case) */ 
} 

ul li a:hover { 
    cursor: pointer; 
    } 

DEMO：http://jsfiddle.net/vfa01j14/