Html 我试图将这些元素集中在背景图像中

我目前有一个问题集中在我的背景图像这些元素。我希望

标记位于

标记下方，按钮位于

标记下方。我试着添加

标记来分解它们，但这似乎不起作用。我也在使用语义，所以可能有些代码覆盖了我想要做的事情？ 任何帮助都将不胜感激！

。英雄形象{
背景：url（'/images/charity.jpg'）；
背景位置：中心，顶部；
背景重复：不重复，不重复；
背景尺寸：封面，封面；
身高：100%；
}
.英雄形象：以前{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景图像：线性渐变（右下角，#759FA2，#759FA2）；
不透明度：.8；
}
.关于.包装{
填充：30px 20px 0；
}
.说明{
颜色：#505050；
线高：1.4；
}
.标志转盘{
填充：10px 20px 0；
}
.关于{
背景色：#FBFAF8；
宽度：100%；
}
.英雄形象.包装{
对齐项目：居中；
显示：-webkit flex；
身高：100%；
位置：相对位置；
}
.英雄形象h1{
字号：3.125em；
颜色：#fff；
线高：1.2；
文本对齐：居中；
}
.英雄形象{
颜色：#fff；
线高：1.2；
文本对齐：居中；
}

Lorem ipsum dolor sit amet


圣公会精英，塞德·多·埃乌斯莫德（sed do eiusmod）



临时劳工保险
欢迎找到善良的媒体！
你好，我叫玛丽卡。我是一名热爱并热衷于帮助他人的Web开发人员。

要确保段落、标题和按钮分别显示，请使用 {显示：内联；}

---

在div元素中。

您的意思是为带有该包装的项目实现

flexbox

？这就是为什么它们是水平的

将包裹和宽度添加到

flexbox

的子项将解决此问题

别忘了你的浏览器前缀

.hero-image .wrapper {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-flex;
    height: 100%;
    position: relative;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.hero-image h1,
.hero image p,
.hero-image button {
  width: 100%;
}

---

小提琴示例：

我看到您使用了display:-webkit-flex。为了让元素以您想要的方式呈现，您只需添加flex-direction:column行到同一个类。这是添加了这一行的解决方案

我还冒昧地删除了您在html中添加的换行符。

。英雄形象{
背景：url（'/images/charity.jpg'）；
背景位置：中心，顶部；
背景重复：不重复，不重复；
背景尺寸：封面，封面；
身高：100%；
}
.英雄形象：以前{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景图像：线性渐变（右下角，#759FA2，#759FA2）；
不透明度：.8；
}
.关于.包装{
填充：30px 20px 0；
}
.说明{
颜色：#505050；
线高：1.4；
}
.标志转盘{
填充：10px 20px 0；
}    
.关于{
背景色：#FBFAF8；
宽度：100%；
}
.英雄形象.包装{
对齐项目：居中；
显示：-webkit flex；
身高：100%；
位置：相对位置；
弯曲方向：立柱；
}
.英雄形象h1{
显示：块；
字号：3.125em；
颜色：#fff；
线高：1.2；
文本对齐：居中；
}
.英雄形象{
显示：块；
颜色：#fff；
线高：1.2；
文本对齐：居中；
}
.按钮{
显示：块；
}

Lorem ipsum dolor sit amet
圣公会精英，塞德·多·埃乌斯莫德（sed do eiusmod）

临时劳工保险
欢迎找到善良的媒体！
你好，我叫玛丽卡。我是一名热爱并热衷于帮助他人的Web开发人员。

您正试图将

.wrapper

元素集中在它们各自的父

元素中。将flexbox规则添加到子元素将不起作用。相反，您需要将flexbox规则放在

元素上，然后该元素将子

.wrapper

divs居中

对于下面的示例，我添加了一个名为

.visually centered

的类，它将垂直和水平地将子

.wrapper

元素居中

。英雄形象{
背景：url（'/images/charity.jpg'）；
背景位置：中心，顶部；
背景重复：不重复，不重复；
背景尺寸：封面，封面；
身高：100%；
文本对齐：居中；
}
.英雄形象：以前{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景图像：线性渐变（右下角，#759FA2，#759FA2）；
不透明度：.8；
}
.关于.包装{
填充：30px 20px 0；
}
.说明{
颜色：#505050；
线高：1.4；
}
.标志转盘{
填充：10px 20px 0；
}
.关于{
背景色：#FBFAF8；
宽度：100%；
}
.英雄形象.包装{
位置：相对位置；
}
.英雄形象h1{
字号：3.125em；
颜色：#fff；
线高：1.2；
}
.英雄形象{
颜色：#fff；
线高：1.2；
}
/*新的helper类可以保持事物干燥*/
.视觉居中{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*仅用于示例，以便正确渲染*/
.英雄形象，
.关于{
身高：400