Menu
See this image:
It's a little off-kilter, and I'd like to move the content up, or the bullet itself down. I've tried padding, margin and positioning to no avail.
972
The vertical-align property in CSS controls how elements set next to each other on a line are lined up. In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span> , <img> ) or inline-block (e.g. as set by the display property) elements.
By using the css list-style-position property and setting that to “inside” our bullets move to the inside of our list element, and in combination with the padding of 0 our list align perfectly with the rest of our text.
We use CSS padding-left property, to create a space between bullets and the text. It is used to set the padding area on the left of an element. HTML support ordered list, unordered list and HTML support ordered list, unordered list and we must use the <ul> tag, to create unordered list in HTML.
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
Try setting the vertical-align property on the list items. Possible values are:
baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
jsFiddle example
HTML
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
CSS
ul {
list-style-image: url(http://cdn1.iconfinder.com/data/icons/c9d/check.png);
}
li {
vertical-align:top;
}
You could try to set line-height equal to the height of the image
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
