Что лучше всего выровнять текст прямо рядом с элементом 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 к тексту или я должен просто отрегулировать запас сНа элемента, но я не думаю, что это наилучшее возможное решение ..

Answer 1

На вашем div, установите:

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

Это положение div так же, как изображения.

Answer 2

В целом, наличие line-height для li будет хорошим выбором.

Ваш JSfiddle,

li{ 
    line-height: 10px; 
} 

проверить эту JSFiddle.