CODEWITHSUNDEEP
htmlcss
rshah
rshah

Reputation: 691

Two separate lines space themselves really far apart

I've created a block split into 2 sections, an image and some text.

The image aligns fine in the center, but for some reason when I use 2 lines of text, they space themselves to the top and bottom ends of its parent.

I want to try and avoid using negative margins if possible.

JSFiddle: http://jsfiddle.net/8rLf4qob/

HTML:

<div class="info-block">
    <span class="icon"><i class="fa fa-user"></i></span>
    <span class="value">495<br /><small>New Users</small></span>
</div>

CSS:

.info-block {
    width: 100%;
    background: #F9F9F9;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    margin: auto;
    padding: 0;
    text-align: center;
    height: 100px;

    .icon {
        width: 40%;
        float: left;
        margin: auto;
        background-color: #27344C;
        color: white;
        height: 98px;
        line-height: 98px;
        font-size: 40px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .value {
        height: 100px;
        margin: 0;
        padding: 0;
        color: #333;
        text-align: center;
        font-size: 32px;

        small {
            font-size: 16px;
            margin: 0; padding: 0;
        }
    }
}

Upvotes: 0

Views: 35

Answers (1)

cptstarling
cptstarling

Reputation: 779

You could start by adding the following attributes to your .value selector:

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

Hopefully this gives you a push in the right direction.

Upvotes: 1

Related Questions