CODEWITHSUNDEEP
htmlcss
LuckyLuke
LuckyLuke

Reputation: 49097

Image is not vertically centered

Why isn't the image centered in the li? The dimensions of it is 25x25px.

#information-list li {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #c1c0bf;
}

#information-list li img {
    vertical-align: middle;
    margin-right: 10px;
}

<ul id="information-list" class="flat-list">
    <li>
        <img src="images/test.png" />
        <strong>Foo</strong>
    </li>
    ...

enter image description here

Upvotes: 0

Views: 195

Answers (3)

ShadowScripter
ShadowScripter

Reputation: 7369

You can read about vertical-align, and how it works here.
As commented by animuson, here is how you should use inline elements and vertical-align.

Essentially, you need to vertically align both inline elements, and you did it on one only.
You should also try to keep line-height properties on blocks that contain text.

Here's a JSFiddle example - I also included some proof that it is in fact centered

CSS

#information-list li {
    padding: 0 10px;
    border-bottom: 1px solid #c1c0bf;
}

#information-list li img,
#information-list li span{
    vertical-align:middle;
}

#information-list li span{
    font-weight: bold;
    line-height: 50px;
}

HTML

<ul id="information-list" class="flat-list">
    <li>
        <img src="images/test.png" />
        <span>Foo</span>
    </li>
    ...

Here's a screenshot

vertical align with inline elements

W3C will give us a bit of insight.

www.w3.org - line-height:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.
The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).

The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. (For more details, see CSS level 3.)

On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.

www.w3.org - vertical-align:

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

Note. Values of this property have different meanings in the context of tables. Please consult the section on table height algorithms for details.

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.

In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.

The default blocks

The HTML you provided consists of 4 blocks which have these display properties by default.

Try to remember them. Though they have little impact on this particular scenario, it is good to know the defaults and what they do and what they are for.

See also

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

Upvotes: 0

Alex
Alex

Reputation: 9041

Try this instead:

#information-list li {
    height: 50px;
    line-height: 50px;
    padding: 0 10px 0 20px;
    border-bottom: 1px solid #c1c0bf;
    background:transparent url(images/test.png) no-repeat left center;
}

<ul id="information-list" class="flat-list">
    <li>
        <strong>Foo</strong>
    </li>
    ...

Upvotes: 1

Jack
Jack

Reputation: 9388

It is vertically centered for me (tested your css/markup in Chrome/Firefox/IE)

Do you have a valid doctype?

Upvotes: 0

Related Questions