Html 如何垂直对齐文本行？

我的文本行垂直对齐有问题。我有两行文本，，我想把第二行放在我的底部，所以我试着做垂直对齐：底部和文本底部，顶部和底部在我的中，但这不起作用

.标题{ 网格区域：标题； 背景色：红色； 显示：网格； 网格模板区域：“headerLeft rest headerRight”； 网格模板柱：10%1fr 30%； 填充物：5px； } .标题p{ 边际：0px； } 海德赖特先生{ 网格区域：headerRight； } .头灯{ 浮动：对； }

Ola

Ola

---

你正在使用网格，因此你可以使用对齐项：在标题的末尾，它会将你的元素对齐到底部。看一看，我建议如下，其中包括对HTML的一些小的更新；解释见对代码本身的注释：

.标题{ 网格区域：标题； 背景色：红色； 显示：网格； 网格模板区域：“headerLeft rest headerRight”； 网格模板柱：10%1fr 30%； 填充物：5px； } .标题p{ 边际：0px； } 海德赖特先生{ 网格区域：headerRight； /*这里我们指定CSS网格布局的使用：*/ 显示：网格； /*定义顶部和底部0以及左侧和右侧5px网格 排水沟：*/ 网格间距：0 5px； /*定义栅格的命名区域：*/ 网格模板区域： .第1段图像1段图像2 …图像一图像二 .第2段图像1图像2； /*定义列的大小；这里是第一列 采用一个分数单元1fr，其他列的尺寸， 使用repeat（重复）功能，在min content（最小内容）下，使 网格列大小为包含其内容所需的最小值：*/ 网格模板列：1fr repeat3，最小内容； /*这里我们有三行，每行大小，使用repeat函数， 要将每行大小调整为最小内容，请执行以下操作：*/ 网格模板行：repeat3，最小内容； } /*将各种元素定位到适当的网格区域：*/ .头灯p：第一种类型{ 网格区域：第1段； } .头灯p:nth类型2{ 网格区域：第二段区域； } .头灯img：第一种类型{ 网格区域：imageOne； } .头灯img:nth-of-type2{ 网格区域：图像二； } 被移除的元素， 部分是因为语义原因，部分是因为 完全不必要-> 奥拉

元素，当使用网格布局时 没有任何用途，因此被删除-> 奥拉

---

哪个你想放在第二个@MonikaMangal的底部。因为我想把第一个放在顶部，它是按默认设置完成的，第二个放在按钮处。所以我假设你的问题所需要的代码的唯一部分是.headerRight元素，它的子元素以及相关的CSS？@DavidThomas。好吧，我只是确定地发布了.header和.headerRight。我认为这是一个格式化的问题。你们正在浮动那个div的所有P子元素，这使得一些属性，比如对齐，并不像我们预期的那样工作。你想让headerRight的所有子项都浮动是有原因的吗？我不想让我的所有项目和结尾都浮动。你想在第二个Ola中使用哪一个标题。我已经在问题评论中找到了解决方案。如果你想看看我想要什么。是的，非常清楚和简单，我有。。谢谢你的帮助。