Question

这是实例：

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

现在我无法使图标垂直对齐，并使文本在图像中心位于“1”“2”。

有什么建议吗？

Answer 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。这就是你需要的吗？

Answer 2

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

Answer 3

你需要修改CSS

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

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

使div中的元素垂直对齐

3 个答案: