将文本对齐到html div元素旁边的最佳做法是什么？

Question

我正在创建一个无序列表，在该列表中我想添加一个颜色托盘类型窗口，我尝试按以下方式创建一个

<ul><li><div style="width:10px; height:10px;  background-color:#0066cc; float:left;"></div>test</li></ul>

http://jsfiddle.net/wNkmJ/

我附加了一个小提琴链接来查看输出..是否有一个很好的方法将div与文本对齐或者我应该只调整div元素的边距，但我不认为这是最好的解决方案.. < / p>

Answer 1

在你的div上，设置：

text-align: center;
display: inline-block;
float: none;

这使div与图像定位的方式非常相似。

Answer 2

一般来说，line-height为li将是一个不错的选择。

来自你的JSfiddle，

li{
    line-height: 10px;   
}

查看此JSFiddle。