我有以下問題：我想垂直居中某些文本。我知道，這並不困難，但我需要它在不知道我的任何元素的高度的情況下居中。高度差異很大，我不能給它一定的高度。高度可變的垂直中心

我的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的高度，但在旁邊的文字它沒有一定的高度。

請幫忙嗎？

來源

2015-06-20 Kelli

這是我會怎樣解決您的問題親自...

下面的代碼顯示你如何能垂直通過使用鬼元素的排列你的元素...

潛在的解決方案：

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

UPDATE：

這裏是一個工作JsFiddle感謝suslov

來源

2015-06-20 14:45:00

完美的工作，科斯！ – Kelli

很高興幫助，享受！ –

[也許可以幫忙]（https://jsfiddle.net/w0v0m050/） – potashin

怎麼會這樣

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

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

來源

2015-06-20 15:36:05 Irfan

對我來說，理想的答案是下面的網站：

howtocenterincss

這是一個非常好的集中工具，您可以選擇您的案例並獲得最佳解決方案。您甚至可以選擇要支持的IE版本。

來源

2015-06-21 17:33:35

高度可變的垂直中心

回答

潛在的解決方案：

UPDATE：

相關問題