垂直居中响应横幅图像中的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线

回答

相关问题