Html 如何将标题和图像居中放置在响应标题的右侧

首先，我很抱歉，因为我知道这是可能的，但我真的很烂的CSS

这就是我想做的：

我设法做到了，但真的很乱。。。主要的问题是我的标题根本没有响应性，我想知道最好的方法是什么（我知道通常flexbox在构建响应性的东西时是一个很好的实践，但我的问题是，如果我使用flexbox创建了两列，我将无法将它们相邻对齐）

这是我当前的代码（我知道它很难看）：

标题{
背景色：#c16200；
颜色：白色；
边缘顶部：1米；
溢出：隐藏；
位置：粘性；
排名：0；
宽度：100%；/*全宽*/
z指数：1；
最大高度：8vh；
}
h1{
颜色：白色；
文本对齐：居中；
字号：2em；
字体系列：“Raleway”，无衬线；
文本转换：大写；
字母间距：0.08em；
位置：相对位置；
}
.标志{
位置：绝对位置；
顶部：10px；
右：35%；
高度：2.5em；
}
.线路{
保证金：0自动；
宽度：17em；
高度：2倍；
底部边框：2件纯白；
}
.标题句{
边缘顶部：0.2米；
字号：0.8em；
字体：斜体；
文本对齐：居中；
字体系列：“Raleway”，无衬线；
}

标题

字幕

在带有CSS的HTML中，有时对元素进行嵌套是个好主意

我使用包装器元素（

.header title composition

）垂直布局标题、行和副标题。这一切都被包裹在

内的纸平面旁边。标题

，负责水平布局

标题{
背景色：#c16200；
颜色：白色；
边缘顶部：1米；
溢出：隐藏；
位置：粘性；
排名：0；
宽度：100%；
/*全宽*/
z指数：1；
/*这会破坏演示中的所有内容*/
/*根据实际视口的高度确定高度有些危险*/
/*最大高度：8vh*/
}
.标题标题{
显示器：flex；
对齐项目：居中；
}
.标题：第一个孩子{
左边距：自动；
}
.标题：最后一个子项{
右边距：自动；
}
h1{
颜色：白色；
文本对齐：居中；
字号：2em；
字体系列：“Raleway”，无衬线；
文本转换：大写；
字母间距：0.08em；
位置：相对位置；
}
.标志{
/*位置：绝对位置；
顶部：10px；
右：35%*/
高度：2.5em；
}
.线路{
保证金：0自动；
宽度：17em；
高度：2倍；
底部边框：2件纯白；
}
.标题句{
边缘顶部：0.2米；
字号：0.8em；
字体：斜体；
文本对齐：居中；
字体系列：“Raleway”，无衬线；
}

标题

字幕

这里是您的一个起点。首先，我添加了

.headerbrand

作为标题、行、句子和图像的包装。用于对齐的

display:flex

。当屏幕大小低于480px时，额外的媒体查询负责对齐（但您可以自己尝试，因为可能仍然存在一些问题）

标题{
背景色：#c16200；
颜色：白色；
边缘顶部：1米；
溢出：隐藏；
位置：粘性；
排名：0；
宽度：100%；
/*全宽*/
z指数：1；
最大高度：80vh；
显示器：flex；
}
.标题品牌{
保证金：0自动；
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}
h1{
颜色：白色；
文本对齐：居中；
字号：2em；
字体系列：“Raleway”，无衬线；
文本转换：大写；
字母间距：0.08em；
位置：相对位置；
保证金：0；
}
.标志{
高度：2.5em；
左边距：20px；
}
.线路{
保证金：0自动；
宽度：17em；
高度：2倍；
底部边框：2件纯白；
}
.标题标题{
边缘顶部：10px；
}
.标题句{
边缘顶部：0.2米；
字号：0.8em；
字体：斜体；
文本对齐：居中；
字体系列：“Raleway”，无衬线；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.线路{
宽度：100%；
}
.标志{
左边距：0；
}
}

标题

字幕

使用

text align:center

组合

flexbox

和一个简单的包装器，装饰线可以是一个伪元素

h1，
分区，
p{
保证金：0；
}
标题{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：#c16200；
颜色：白色；
溢出：隐藏；
位置：粘性；
填充：0.5雷姆；
排名：0；
宽度：100%；
/*全宽*/
z指数：1；
字体系列：“Gill Sans”，“Gill Sans MT”，“Calibri”，“Trebuchet MS”，无衬线；
}
.标志包装{
文本对齐：居中；
右边距：1rem；
}
收割台img{
宽度：2em；
高度：2em；
}
h1{
字体大小：粗体；
字体大小：1.5rem；
}
h1：：之后{
宽度：10雷姆；
高度：1px；
显示：块；
背景色：白色；
内容：''；
}

标题
标记线

我想您希望包含标题和副标题的元素居中，图像与之对齐，而不是两者一起居中。因此，这里有一个解决方案：

使用

display:flex

和

标题

上的其他flex设置（见下文），将

.title容器

置于

标题

的中心位置。通过对图像应用

position:absolute

，使其成为

.title container

的子对象，并将

position:relative

应用于

。title container

使其成为绝对定位图像的位置参考，可以避免文本容器和图像一起居中。这样，在将

.title-c居中时根本不考虑图像