H2正在中間出現

我試圖創建一種帶有標題的橫幅。但是當我嘗試將<h2>標題放入<div>。由於某種原因，它出現一半。我知道我可以通過將margin-top - 20px左右來解決這個問題，但是這讓我覺得我不得不這樣做。H2正在中間出現

守則（https://jsfiddle.net/j5ba4ajo/3/）：

h2 { 
 
    text-align: center; 
 
} 
 
#player-opponent { 
 
    width: 545px; 
 
    height: 40px; 
 
    background-color: red; 
 
    float: left; 
 
    margin-left:5px; 
 
    margin-top:5px; 
 
}

<div id = "player-opponent"> 
 
    <h2>Player x vs player y<h2> 
 
</div>

來源

2017-08-01 Slavik Ribz

實現它，你可以在H2默認保證金重置爲0 –

上有<h2>默認的餘量。你必須刪除它。垂直中心，你必須設置height和line-height要將容器的height的<h2>的文本（#player-opponent）：

h2 { 
 
    font-family: "Trebuchet MS"; 
 
    text-align: center; 
 
    position:relative; 
 
    margin:0; 
 
    height:40px; 
 
    line-height:40px; 
 
} 
 
#player-opponent { 
 
    width: 545px; 
 
    height: 40px; 
 
    background-color: red; 
 
    float: left; 
 
    margin-left:5px; 
 
    margin-top:5px; 
 
}

<div id="player-opponent"> 
 
    <h2>Player x vs player y</h2> 
 
</div>

來源

2017-08-01 21:51:36

哦~~看我做了檢查元素和它沒有看因爲背景是紅色，所以它有一定的餘量。現在我看，由於黃色邊緣，它變成了一點橙色。愚蠢的問題哈哈，但無論如何感謝:) –

只需添加：行高：0;到h2。這將解決它 - 或者如果你願意，你可以在h2上填充填充。這將修復它而不會干擾你的填充。

h2 { 
    text-align: center; 
    line-height:0 
}

來源

2017-08-01 21:52:09 Korgrue

添加margin: 0;到h2避免默認的保證金每一個瀏覽器增加了標題元素。

https://jsfiddle.net/07syo5zp/

來源

2017-08-01 21:56:57 Johannes

此加入＃玩家的對手居中東西更好。根據您的喜好，h2上的保證金可能需要也可能不需要任何更改。

align-items: center; 
display: flex; 
justify-content: center;

來源

2017-08-01 21:59:01 wpalmes

其實問題是H2是獲得溢出，所以你可以簡單地通過

h2 { 
    overflow: auto; 
    } 

#player-opponent { 
    width: 545px; 
    height: 40px; 
    background-color: red; 

    }

來源

2017-08-01 22:06:08

H2正在中間出現

回答

相關問題