Why is this css vertical-align not working [duplicate]

Question

This question already has answers here:

Why is vertical-align: middle not working on my span or div? (17 answers)

Closed 8 years ago.

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?

Answer 1

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.

Answer 2

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

JSFiddle

Answer 3

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

Answer 4

I have added this to the CSS Part

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

Working Fiddle

Answer 5

.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

Answer 6

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.