我有以下的菜单栏:如何在使用flexbox时使用li元素垂直居中文本?
<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。但我不认为这是解决方案。
谢谢。
如果行高工作得很好,为什么不利用呢? –
我编辑了我的答案,关于你的问题。你的'ul'是高度50px。你的'ul li'有line-height:50px。它将中心。请再次查看“运行代码片段”。 –