垂直对齐标签li的项目？ （我也试过＆＃34;显示：table-cell＆＃34;但是没有工作）

Question

我想对img.at<cv::Vec3b>的文字进行垂直对齐.. 我还尝试添加标签 li

<li>

但是没有工作......

我尝试在li处使用相同的高度值添加行高...（效果非常好，但如果项目的文本在两行上，效果很差）..

display: table-cell   

谢谢！

Answer 1

它不起作用，因为你是浮动元素。指定float时，它会将元素的display属性设置为block。

Answer 2

凭借您现在所拥有的display: table-cell可以完成这项工作。您只需将ul设置为表格并将li用作行。内部div应该显示为table-cell：

ul {
    display: table;
}
li {
    display: table-row;
}
li div {
    display: table-cell;
    vertical-align: middle;
}

这是[小提琴的更新]（https://jsfiddle.net/r0r7paLd/3/。

N.B。您可能希望以更好的方式布局事物（没有浮点数）。您还应该从css中删除多余的属性。但这超出了你的问题的范围。