CODEWITHSUNDEEP
css
user2969135
user2969135

Reputation: 53

Vertical-Align not working

Please do not mark this as a duplicate as i have got all of the correct code (as far as i can see) in and i think something is somehow over riding it. Used Chrome Inspector but it isnt picking up any problems.

I am trying to vertically align the text in the boxes (i dont want to id them all separately and pad them as if the text needs updated then so will the css).

Here is the code:

CSS:

.draggable{ 
    color: #ffffff;
    background-color:#EE3C96;       
    display:table-cell;
    vertical-align:middle;
    font-size:12px;
    font-weight:bold;
    text-align: center;
    width: 90px;
    height:90px;
    float: left;
    margin-left: 10px;
    padding: 5px; 
}

HTML:

<div class="draggable">
        Lost time - employee absence
        </div>

        <div class="draggable2">
        "Safe Place" to work
        </div>

        <div class="draggable">
        Lost resources - employees leaving
        </div>

        <div class="draggable">
        Financial penalties
        </div>

And here it is on Codepen:

http://codepen.io/lbarnes/pen/vkrib

draggable and draggable2 are essentially the same (need them separate as it is used in the jQuery :)

Thanks in advance, hopefully someone can find something as i have tried everything lol!!

Upvotes: 0

Views: 83

Answers (3)

Sunil Hari
Sunil Hari

Reputation: 1776

You can add the following code to the draggable classes to solve the issue.Remove the display:table-cell

display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

This would center the text inside the div both horizontally and vertically

This works for webkit browsers.For Mozilla

display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

and IE

    display:-ms-box;
    -ms-box-pack:center;
    -ms-box-align:center;

More info on browser support

Upvotes: 0

Dragos Sandu
Dragos Sandu

Reputation: 664

You can put the text in the box between <p></p> tag than add in your css the following lines:

.draggable p {vertical-align: middle;}
.draggable2 p {vertical-align: middle;}

Upvotes: 0

zessx
zessx

Reputation: 68790

I recommend you to use the double span tip to vertically align your multiline text.

First, a simple exemple

And now, adapted to your needs :

<div class="draggable">
    <span><span>
        Lost time - employee absence
    </span></span>
</div>

<div class="draggable2">
    <span><span>
        "Safe Place" to work
    </span></span>
</div>

You can keep your current HTML markup, and add these spans via jQuery (I won't recommend it) :

$('.draggable, .draggable2').contents().wrap('<span><span></span></span>');

Then, add this CSS to get your vertical alignment :

/* Vertical align */
.draggable, .draggable2 {
    display: block;
    width: 90px; height: 90px;
    line-height: 90px;
}
.draggable>span, .draggable2>span {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}
.draggable>span>span, .draggable2>span>span {
    line-height: 20px;
}

Your CodePen forked

enter image description here

Upvotes: 1

Related Questions