0

I want to center verticaly a paragraph in a div. For that, I tried to add an image front my text and I add the css "vertical-align:middle" on it.

The first line of my text is verticaly aligned : it's good, but the second line is under my div.

How can I solve my problem ?

Thks

MY JS FIDDLE

div {
    height:200px;
    width:200px;
    text-align:center;
    background:cyan;
    position:absolute;
}

span {
    height:inherit;
    width:inherit;
    position:absolute;
    left:0;
    background: yellow;
    text-align:center 
}

img {
    height:100%;
    vertical-align:middle;
    width:3px;}
}
Bonjour
  • 127
  • 1
  • 10
  • you tell the image to have a 100% height, as a inline element any following line will start below the 100%, which in your case is below the div. – Marcel Feb 18 '14 at 13:13
  • It should be noted that there is no paragraph in your fiddle! – Paulie_D Feb 18 '14 at 13:17

1 Answers1

1

You can make use of the display:table css:

div {
    height:200px;
    width:200px;
    background:cyan;
    display:table;
}

span {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

Example

Pete
  • 57,112
  • 28
  • 117
  • 166
  • I need my div has the "display:inline-block" – Bonjour Feb 18 '14 at 13:20
  • @Bonjour, just add an extra div inside then and give that a style of table: http://jsfiddle.net/peteng/nSk5r/5/ – Pete Feb 18 '14 at 13:22
  • @Bonjour, actually you don't need the extra div. You can just define the proportions on the table-cell and keep your div as inline-block: http://jsfiddle.net/peteng/nSk5r/6/ – Pete Feb 18 '14 at 13:37