垂直居中響應橫幅圖像中的H1 + H2線

-1

以下是我當前使用的<h1>標籤的CSS代碼，以使它們在響應橫幅內保持垂直居中（歡迎更正）。在橫幅內添加一個標題中的<h2>副標題的最簡單方法是什麼？另外還有兩個標題垂直居中，只有一個突破空間或類似的標題？垂直居中響應橫幅圖像中的H1 + H2線

.image { 
    position: relative; 
    vertical-align: middle; 
} 

h1 { 
    font-family: 'Merriweather Sans', sans-serif; 
    position: absolute; 
    letter-spacing: 3px; 
    font-size: 300%; 
    text-align: center; 
    bottom: 40%; 
    width: 100%; 
    height: 15%; 
    color: white; 
}

來源

2017-06-19 P Nielsen

你的html在哪裏？我假設'.image'不是'img'元素？我想看看你目前有什麼。提供一個[mcve]請 –

我假設你想要這樣的東西，但不能看出你的所有代碼https://codepen.io/anon/pen/XgMBzm –

如果您不需要在這面旗幟特定的高度，你可以簡單地使用填充：

<header> <!-- with background image --> 
    <div id="content"> 
    <h1></h1> 
    <h2></h2> 
    </div> 
</header> 

#content { 
    text-align: center; 
    padding: 3rem 0; 
}

如果旗幟有一個特定的高度，那麼你可能會使用變換：

header { 
    height: 300px; 
    position: relative; 
    background-image: url(); 
} 

#content { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

來源

2017-06-19 22:38:21

謝謝。我已經成功添加了第二行文字。但它不會保持垂直居中在較小屏幕尺寸的響應背景圖像（橫幅）上。 IOW橫幅的高度與其寬度成比例地減小，從而使文本部分地位於其下方。我怎樣才能設置一個最小高度，低於這個高度，橫幅不會縮小，所有的文本都可以被包含在內？我曾嘗試使用最小高度，但它似乎是過度纏身並且不起作用。 –

@P尼爾森，如果你發佈你的標記，這將是一個很大的幫助。我們在這裏瞎了眼，卻不知道我們在做什麼。 –

垂直居中響應橫幅圖像中的H1 + H2線

回答

相關問題