centering of content horizontal and vertical in a fixed Dimensional div

Question

I want to to have content like below
for this first one I used line-height 40px

enter image description here for the second one I used line-height 120px

This means as content varies I have to change the line-heights Is there any way to make this type of centering in a fixed dimensional div without changing the class

Can I do this without Javascript ? If I use height as 120px I am getting div s like this ( I dont want this ) enter image description here

style of the div is

<style>
 .rectangle {
        postion:absolute;
    box-shadow: 10px #333;
    border-radius: 23px;
    border-top-right-radius: 0;
    border:6px solid;
    block:inline;
    line-height: 123.6px;
    width:200px;
    background-color: #444;
    float: left;
    margin: 5px;
    text-align: center;
    color:white;
   font-weight:900;

    text-decoration:none;
}
</style>

http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html — Jawad, Sep 06 '12 at 11:42
http://stackoverflow.com/questions/5421334/vertical-and-horizontal-align-middle-and-center-with-css — Jawad, Sep 06 '12 at 11:42
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html — Jawad, Sep 06 '12 at 11:43
Additionally there is no such thing as position: absolute and float: left. Float & Positioning dont work together. — Jawad, Sep 06 '12 at 11:44
block:inline; ? There is no such property. Maybe display: block;, display: inline-block; — Jawad, Sep 06 '12 at 11:52

tommarshall · Accepted Answer · 2012-09-06T11:59:44.877

2

Vertical centring is tricky. Chris Coyier at CSS tricks has a great article on this - http://css-tricks.com/centering-in-the-unknown/

My personal preference is the ghost pseudo element, but it's only viable in IE8+ so you may need to look at some of the other examples if legacy IE support is necessary.

Here's a working fiddle - http://jsfiddle.net/tommarshall/eGJQC/3/

edited Sep 06 '12 at 11:59

answered Sep 06 '12 at 11:50

tommarshall

2,038
5
23
36

score 1 · Answer 2 · answered Sep 06 '12 at 12:00

1

Make .rectangle element to be displayed as table, and the inner text paragraph to be displayed as a table cell. Then you can easily vertical position your paragraph.

Here is a working example: http://jsfiddle.net/ktzUn/

answered Sep 06 '12 at 12:00

alexbusu

701
4
13

1

Note this does not work in IE7 and under, and IE8 exhibits strange behaviours with `display:table;` – David Barker Sep 06 '12 at 12:13
With the increase in the content the height of the div is increasing http://jsfiddle.net/ktzUn/ – madhu131313 Sep 06 '12 at 12:33
David, it's true about IE7 and below; IE8 requires a !DOCTYPE. Madhu13, what did you expect? – alexbusu Sep 06 '12 at 13:11

score 0 · Answer 3 · answered Sep 06 '12 at 12:00

0

following css works properly even if height and the content in div varies

.rectangle 
      {
        height:auto;
        postion:absolute;
        box-shadow: 10px #333;
        border-radius: 23px;
        border-top-right-radius: 0;
        border:6px solid;
        block:inline;
        width:200px;
        background-color: #444;
        float: left; padding:20px 10px 20px 10px;
        margin: 5px;
        text-align: center;
        color:white;
        font-weight:900;
        text-decoration:none;
    }

answered Sep 06 '12 at 12:00

vivek salve

991
1
9
20

block:inline is for changing the block element to inline element http://www.w3schools.com/cssref/pr_class_display.asp – madhu131313 Sep 06 '12 at 12:26
block:inline; ? There is no such property. Maybe display: block;, display: inline-block; – Jawad Sep 07 '12 at 15:24

score 0 · Answer 4 · answered Sep 06 '12 at 14:40

0

Vertical alignment works perfectly only in table>tr>td. for others you can also try giving padding from top and bottom. that doesn't need any vertical alignment and would work simply best.

Thanks Rahul

answered Sep 06 '12 at 14:40

Rahul

928
5
8

centering of content horizontal and vertical in a fixed Dimensional div

4 Answers4