1

The point is that I have set vertical-align: center property

I have a p:

<p><span>Hello World</span></p>​

p{
    text-align:center;
    height:200px;
    width:200px;
    border:1px black solid;
}
span{
    vertical-align: middle;
    display:inline-block;
}

Here is the demo:http://jsfiddle.net/hh54188/yhLqV/2/

I want the text in the paragraph could be center at both vertical and horizontal direction

but the span's vertical-align property doesn't work?Why?

I get some advises about set the line-height equal to the parent's height, it works only when there is only one line in the parent box.

How can I achieve my goal(may be I can use some css3 property)? Set the inner element at the center of parent vertical direction

hh54188
  • 14,887
  • 32
  • 113
  • 184
  • It's not exactly what you want, but with some lite work this will do http://www.wpdfd.com/editorial/thebox/deadcentre4.html – The Disintegrator Jul 04 '12 at 03:01
  • possible duplicate of [How to align text vertically center in div with css?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) – user Mar 09 '14 at 18:07

3 Answers3

2

Hi you can achieve your desired results through the mentioned below CSS code :-

You can give the display:table to the parent and display:table-cell; & vertical-align:middle; to the Child than you will be to get your desired results as mentioning below the CSS & Demo link...

CSS

p{
    text-align:center;
    height:200px;
    width:200px;
    border:1px black solid;
    display:table;

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

here is the demo :- http://jsfiddle.net/yhLqV/5/

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
0

Changes in your CSS [Working fiddle]:

`   border: 1px solid black;
    height: 200px;
    margin: 50% auto;
    width: 200px;`
xan
  • 4,640
  • 13
  • 50
  • 83
0

you might want to dig in to properties like display: table, table-cell, table-row. I believe those are ie8 and above. so you can imitate table behavior with your html organization.

html is same...

css will be

p{
    text-align:center;
    height:200px;
    width:200px;
    border:1px black solid;
    display:table;
}
span{
    vertical-align: middle;
    display:table-cell;
}

​fiddle: http://jsfiddle.net/yhLqV/6/

eringen
  • 381
  • 1
  • 7