CODEWITHSUNDEEP
csspositioncenteringparagraph
Math chiller
Math chiller

Reputation: 4167

Centering issue with <p> tag

I have a img and a p inside of a div.

I am trying to center the p vertically. I have tried line-height and a few other things.

Here is what it looks like

enter image description here

I would like "cute firefox prank" to be centered vertically relative to the img

CSS

img{
    width: 50px;
    height: 50px;
}

li{
    list-style-type: none;
    text-decoration: none;
}

a{
    text-decoration: none;
}

li p{
    display: inline;
    color: black;
    font-size: 25px;
    margin:0;
}

DEMO fiddle.

Upvotes: 1

Views: 72

Answers (4)

Pradeep shyam
Pradeep shyam

Reputation: 1292

Try this, http://jsfiddle.net/gBNFK/1/

 li p{
        /* Add this */
        line-height: 42px;
        display: inline-table;
        vertical-align: top;
        /* Add this */
        color: black;
        font-size: 25px;
        margin:0;
    }

Upvotes: 1

jsea
jsea

Reputation: 4037

I am not sure why p has been set to inline; however, since img is an inline tag, you can use vertical-align to align it against other inline content.

I went ahead and made p a block element again, put the image inside it, and made the image vertically aligned.

JSFiddle here.

If you want to keep the p inline, then all you really need to do is set the image to be vertically aligned since p is set to inline as well.

JSFiddle here.

Upvotes: 1

Sean Ryan
Sean Ryan

Reputation: 6056

Add vertical-align:middle; to your img rules. See http://jsfiddle.net/hA9N2/4/ for a working example.

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240938

Done.

Updated jsFiddle

All you have to do is add vertical-align:middle; to the img.

img {
    vertical-align:middle;
}

Upvotes: 2

Related Questions