垂直居中，高度可变

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元素垂直对齐元素......

潜在解决方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

的更新：

感谢JsFiddle

，这是一个有效的suslov

Answer 2

对我来说，理想的答案是以下网站：

howtocenterincss

这是一个非常棒的中心工具，您可以选择案例并获得最佳解决方案。您甚至可以选择支持的IE版本。

Answer 3

怎么样这样

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