Why is this css vertical-align not working

Question

Here is my code.

I have added the vertical-align property for the spans in the div with ed_button class but the third, fourth and the fifth boxes are displaying the spans at top positions not in the middle.

Am I doing anything wrong here?

This might help you for sure http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working — Vijayakumar Selvaraj, Jan 29 '14 at 09:48
@AmarnathBalasubramanian: I wanted all my divs of same width. — me_digvijay, Jan 29 '14 at 09:58
@ThankYouSRT check this [fiddle](http://jsfiddle.net/VY7rc/30/) — Amarnath Balasubramanian, Jan 29 '14 at 10:04
@ThankYouSRT i have posted an answer can you please check that and let me know is that correct? — Amarnath Balasubramanian, Jan 29 '14 at 10:10

osmanz · Accepted Answer · 2014-01-29T10:29:04.023

2

You need to give the outer-div display: table. And float: left will fulfill your purpose of horizontal alignment.

.ed_button{
    display: table;
    float: left;
    margin-right: 3px;
}

and the inner-div should have display: table-cell

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

Check out the DEMO here.

edited Jan 29 '14 at 10:29

answered Jan 29 '14 at 10:18

osmanz

481
5
15

score 0 · Answer 2 · answered Jan 29 '14 at 09:47

0

vertical-align property will work for table or table-cell

JSFiddle

answered Jan 29 '14 at 09:47

Praveen

55,303
33
133
164

the entire format has been chagned – Amarnath Balasubramanian Jan 29 '14 at 09:48
@AmarnathBalasubramanian Maybe but I have given OP the answer why vertical-align didn't worked. I was not sure about the format – Praveen Jan 29 '14 at 09:51
but he needs the output, stating reason can be done by noob too, insteasd why dont you help him to get his answer – Amarnath Balasubramanian Jan 29 '14 at 09:52

score 0 · Answer 3 · answered Jan 29 '14 at 10:03

since you have fixed dimension, i would suggest to remove span from multi-line and instead use line-height = div height trick for the purpose of single-line text

.ed_button span {
    vertical-align: middle;
    height: auto;
    line-height:40px;
}

demo

score 0 · Answer 4 · answered Jan 29 '14 at 10:07

0

I have added this to the CSS Part

.ed_button {     
 display: table-cell;
 vertical-align: middle;
 border-right: 5px #FFFFFF solid;
}

`Working Fiddle`

answered Jan 29 '14 at 10:07

Amarnath Balasubramanian

9,300
8
34
62

This is ok if the background color is white, what if have a background image? – me_digvijay Jan 29 '14 at 10:14

score 0 · Answer 5 · edited Jan 29 '14 at 10:15

0

.ed_button{
    background-color: #F9A11A;
    clear: both;
    float: left;
    font-size: 14px;
    height: 40px;
    margin-bottom: 10px;
    text-align: center;
    width: 120px;
        }

Use this css style for your code it 'll work fine

edited Jan 29 '14 at 10:15

lazyprogrammer

633
9
26

answered Jan 29 '14 at 10:13

user3217695

65
1
1
8

Pinasis · Answer 6 · 2014-01-29T10:24:49.127

-1

None of your text are alligned in middle. It is just beacause there is more text in the 1st and 2nd box that it seems to be in middle.

You can also try padding-top, margin-top or Position properties of css.

edited Jan 29 '14 at 10:24

answered Jan 29 '14 at 09:49

Pinasis

33
7

Why is this css vertical-align not working

6 Answers6

Working Fiddle

`Working Fiddle`