Vertical center with variable height

Question

I have the following problem: I want to center some text vertically. I know this is not difficult, but I need it to be focused, not knowing the height of any of my elements. The height varies so much that I can’t give it a certain height.

My HTML DOM:

<div class="list">

<div class="plus-sign-box">
    <div class="plus-sign-box-sign"></div>
    <div class="plus-sign-box-text">
        <div class="inner-box">
            <p>

                Lorem ipsum dolor sit amet, consectetuer adipiscin…

            </p>
        </div>
    </div>
</div>
<div class="plus-sign-box">
    <div class="plus-sign-box-sign"></div>
    <div class="plus-sign-box-text">
        <div class="inner-box">
            <p>

                Nulla consequat massa quis enim. Donec pede justo,…

            </p>
        </div>
    </div>
</div>

Here is my CSS:

 list {
    font: inherit;
    padding: 0px;
    border: 0px none;
    margin: 0px;
    vertical-align: baseline;
    background: #444;
}

.plus-sign-box {
    position: relative;
    min-height: 50px;
    margin-bottom: 0px;
}

.plus-sign-box-text {
    width: 75%;
    color: #FFF;
    height: 100px;
    margin-left: 55px;
}

.inner-box {
    display: table;
    width: 100%;
    height: 100%;
}

.inner-box p {
    display: table-cell;
    vertical-align: middle;
    font-size: 20px;
    color: #FFF;
    text-transform: uppercase;
}

Vertically centering the “+” sign is easy, because it is always 50 pixels high, but there is no specific height next to it.

Any help please?

Answer 1

This is how I personally would solve your problem ...

The following code shows how you can vertically align your elements with ghost elements ...

Potential solution:

.outer { 
        height: auto; 
        text-align: center; 
        background: #444;
    }

    .outer:before { 
        content: ''; 
        display: inline-block; 
        height: 100%; 
        vertical-align: middle;
    }

    span {
        font-size: 50px;
        vertical-align: middle;
        color: #FFF;
    }

    .inner {  
        padding: 10px;
        width: 40rem; 
        display: inline-block; 
        vertical-align: middle;
        font-size: 20px;
        color: #FFF;
        text-transform: uppercase;
    }

<div class="outer">
    <span>+</span>
    <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin…</div>
</div>
<div class="outer">
    <span>+</span>
    <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… </div>
</div>
<div class="outer">
    <span>+</span>
    <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… </div>
</div>

Run codeHide result

UPDATE:

JsFiddle suslov

Answer 2

:

howtocenterincss

, . IE.

Answer 3

How about this type

.plus-sign-box-text {
            width: 75%;
            color: #FFF;
            margin-left: 55px;
            height:auto;
    }

OR

.plus-sign-box-text {
    width: 75%;
    color: #FFF;
    vertical-align:central;
    height:auto;
}