垂直居中,高度可变

Question

我有以下问题:我想垂直居中一些文本.我知道,这并不困难,但我需要它在不知道任何元素高度的情况下居中.高度变化很大,我不能给它一定的高度.

我的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>

这是我的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;
}

"+"符号垂直居中是很容易的,因为它总是50px高度,但它旁边的文字没有一定的高度.

有什么帮助吗？

Answer 1

这就是我亲自解决你的问题的方法......

以下代码显示了如何通过使用ghost元素垂直对齐元素...

潜在解决方案

.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>

更新:

这是一个工作的JsFiddle感谢suslov