垂直對齊在h1周圍沒有空格

Question

我必須讓我的內容div垂直集中在我的標題div，我也不需要在內容div周圍的空間，因爲我確實有它的工作，但它會佔用寬度每次100％。這裏是我的代碼

#header { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 15%; 
 
    background-color: white; 
 
    z-index: 10; 
 
    overflow: hidden; 
 
    display: table; 
 
} 
 
#content { 
 
    display: table-cell; 
 
    overflow: auto; 
 
    vertical-align: middle; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    float: left; 
 
} 
 
h1 { 
 
    display: inline-block; 
 
    margin: 0px; 
 
}

<div id="header"> 
 
    <div id="content"> 
 
    <h1>Jari Rengeling</h1> 
 
    </div> 
 
</div>

Answer 1

使用display:flex與align-items:center上#header。

這是你在找什麼？

#header 
 
{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 30%; 
 
    background-color: green; 
 
    z-index: 10; 
 
    overflow: hidden; 
 
    display: flex; 
 
    align-items:center; 
 
} 
 

 
#content 
 
{ 
 
    
 
    overflow: auto; 
 
    vertical-align: middle; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    float: left; 
 
} 
 

 
h1 
 
{ 
 
    display: inline-block; 
 
    margin: 0px; 
 
}

<div id="header"> 
 
     <div id="content"> 
 
     <h1>Jari Rengeling</h1> 
 
     </div> 
 
</div><!-- #header -->

Answer 2

不能確定這是否是你想達到什麼目的：

https://jsfiddle.net/pf8oujj6/

使用

display: inline-block; 

Answer 3

刪除浮動留在內容。

https://jsfiddle.net/4tc95oy0/

#content 
{ 
    display: table-cell; 
    overflow: auto; 
    vertical-align: middle; 
    padding: 0px; 
    margin: 0px; 
} 

浮法變換您選擇元件在顯示塊重寫顯示錶小區的先前的聲明。