使 div 中的元素垂直居中对齐

Posted 2023-03-04

【中文标题】使 div 中的元素垂直居中对齐

【英文标题】：make the element in the div align vertically middle

【发布时间】：2011-11-22 20:24:03

【问题描述】：

这是一个活生生的例子：

http://jsfiddle.net/NjnAF/

div#con是搜索结果面板，我希望搜索项以列表方式显示，带有图标和文字。

现在我不能让图标垂直居中对齐，也不能让文字成为图像中心的“1”“2”。

有什么建议吗？

【参考方案1】：

我用过：

div.item div.img 
   float: left;
   width: 22px;
   height: 25px;
   background-image: url('http://i.stack.imgur.com/NpSHB.gif');
   background-repeat: no-repeat;
   background-position: center left;
   text-align: center;
   vertical-align: middle;

我已经更新了fiddle。这是你需要的吗？

【参考方案2】：

你需要修改 CSS

    div.item div.img text-align:center;
                      margin-top:2px;  /*can change this according to your need */
                    

添加这两个属性。垂直对齐不起作用。小提琴http://jsfiddle.net/NjnAF/2/

【参考方案3】：

使用 line-height - 垂直对齐：块级元素，如 div 对垂直对齐没有任何影响。您将需要使用 line-height 或使用绝对定位与 div 作为相对。

【讨论】：

或者使用：background-position:left 2px;

我会选择这个作为答案。