Search code examples
csslistvertical-alignment

bullets not centered vertically in Chrome/Safari

In Chrome and Safari I've found that li bullet discs sit 1px below being vertically centered (yes its only 1px but that pixel matters to my design team). Is there anyway to correct this without altering the html, replacing the bullets with images or creating them with psuedo elements?

note: since the text is 9px high and the bullet is 4 it will always end up either 1px too high or low, my issue is that its an additional pixel below that.

image example

ul {
font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
font-size: 12px;
line-height: 18px;
}

http://jsfiddle.net/pixeloco/VWnXr/

Solution

  • Here is one solution. Without touching the html you can insert bullet via css with :before.

    li:before {
    content: '';
    background-color: #ccc;
    display: inline-block;
    position: relative;
    height: 6px;
    width: 6px;
    border-radius: 6px;
    margin-right: 4px;
    top: -1px;
}

    http://jsfiddle.net/VWnXr/6/

    but technically without a workaround its not possible