Html 如何将副标题与标题对齐?

Html 如何将副标题与标题对齐?,html,css,Html,Css,我试图添加一个副标题(在屏幕截图中突出显示) 我的代码从页面中完全删除该元素。请注意,当元素仍在DOM中时,它会以可视方式和任何其他可能的方式被删除(您不能对其或其子元素进行制表,它会被屏幕阅读器忽略,等等) 正文{ 背景图像:url(./assets/shutterstock_1680256285.jpeg); 背景位置:中心; 背景重复:无重复; 背景附件:固定; 背景尺寸:封面; 背景色:rgba(0,88,147,1); } .包装纸{ 显示器:flex; } .标题{ 高度:66px

我试图添加一个副标题(在屏幕截图中突出显示)

我的代码从页面中完全删除该元素。请注意,当元素仍在DOM中时,它会以可视方式和任何其他可能的方式被删除(您不能对其或其子元素进行制表,它会被屏幕阅读器忽略,等等)

正文{
背景图像:url(./assets/shutterstock_1680256285.jpeg);
背景位置:中心;
背景重复:无重复;
背景附件:固定;
背景尺寸:封面;
背景色:rgba(0,88,147,1);
}
.包装纸{
显示器:flex;
}
.标题{
高度:66px;
背景:rgba(0,88,147,1);
背景:-webkit渐变(左上、右上、颜色停止(0%、rgba(0、88、147、1))、颜色停止(59%、rgba(0、88、147、1))、颜色停止(86%、rgba(119、196、42、1))、颜色停止(100%、rgba(119、196、42、1));
背景:-webkit渐变(线性,左上,右上,从(rgba(0,88,147,1)),颜色停止(59%,rgba(0,88,147,1)),颜色停止(86%,rgba(119,196,42,1)),到(rgba(119,196,42,1));
背景:线性梯度(向右,rgba(0,88,147,1)0%,rgba(0,88,147,1)59%,rgba(119,196,42,1)86%,rgba(119,196,42,1)100%);
调整项目:基线;
}
.标志{
最小高度:66px;
宽度:288px;
左边距:2倍;
}
.标志包装{
左:16%;
}
.标题{
边框底部:白色实心1.3px;
}
.横幅{
保证金:0自动;
左侧填充:60px;
右边填充:60px;
填充顶部:16px;
填充底部:60px;
利润上限:计算(350px/2);
文本对齐:居中;
颜色:rgb(19、101、155);
背景色:rgb(255、255、255、0.8);
高度:自动;
溢出:隐藏;
宽度:适合的内容;
背景尺寸:封面;
字体大小:22px;
}
.横幅h1{
字体大小:48px;
垫底:12px;
}

RGP维护
计划维护
您来对了地方,但您的站点在几个小时内不可用,而我们将执行有助于加快学习速度的计划更新。


您可以将您的副标题文本添加到徽标包装div中,并使用flexbox和
对齐项目:flex end

.logo-wrapper {
    padding-left: 16%;
    display: flex;
    align-items: flex-end;
}

阅读有关flexbox的更多信息:

给你。您可以通过使用
flex
align item:center
css属性在
徽标包装器上执行此操作

此外,我还为您的子标题文本添加了一个
span
,其中包含一类
.sub_header
,并在
2em
的左边留出空白,以移动您的子标题

运行下面的代码段

正文{
背景图像:url(./assets/shutterstock_1680256285.jpeg);
背景位置:中心;
背景重复:无重复;
背景附件:固定;
背景尺寸:封面;
背景色:rgba(0,88,147,1);
}
.header_top{}
.包装纸{
显示器:flex;
}
.标题{
高度:66px;
背景:rgba(0,88,147,1);
背景:-webkit渐变(左上、右上、颜色停止(0%、rgba(0、88、147、1))、颜色停止(59%、rgba(0、88、147、1))、颜色停止(86%、rgba(119、196、42、1))、颜色停止(100%、rgba(119、196、42、1));
背景:-webkit渐变(线性,左上,右上,从(rgba(0,88,147,1)),颜色停止(59%,rgba(0,88,147,1)),颜色停止(86%,rgba(119,196,42,1)),到(rgba(119,196,42,1));
背景:线性梯度(向右,rgba(0,88,147,1)0%,rgba(0,88,147,1)59%,rgba(119,196,42,1)86%,rgba(119,196,42,1)100%);
调整项目:基线;
}
.标志{
最小高度:66px;
宽度:288px;
左边距:2倍;
}
.sub_标题{
左边距:2米;
}
.标志包装{
左:16%;
显示器:flex;
对齐项目:居中;
颜色:白色;
}
.标题{
边框底部:白色实心1.3px;
}
.横幅{
保证金:0自动;
左侧填充:60px;
右边填充:60px;
填充顶部:16px;
填充底部:60px;
利润上限:计算(350px/2);
文本对齐:居中;
颜色:rgb(19、101、155);
背景色:rgb(255、255、255、0.8);
高度:自动;
溢出:隐藏;
宽度:适合的内容;
背景尺寸:封面;
字体大小:22px;
}
.横幅h1{
字体大小:48px;
垫底:12px;
}

RGP维护
加速全民学习
计划维护
您来对了地方,但您的站点在几个小时内不可用,而我们将执行有助于加快学习速度的计划更新。

接触help@renaissance.com有很多问题


您能解释一下问题出在哪里吗?我无法在上面截图中突出显示的正确位置获取子标题。因此需要帮助@nirberko您能给我们更详细一点您想要实现的目标吗?是副标题的位置吗?好像你想让它在主标题下,但它不起作用?@Warden330正确!我试图匹配上面的截图,但不知怎么的,它不适合我。你的HTML是错误的。你也不应该使用
中心
,我们已经不是1990年了。“不起作用”不是错误解释,请说明您尝试了什么,以及哪些不起作用。