Html 如何在将文本垂直居中的同时将文本右对齐

发布于01月08日

我正在学习HTML和CSS，并通过为个人页面编写一些HTML来练习.我首先创建一个页眉，我的名字右对齐，但文本垂直对齐顶部.我见过一些人试图实现类似事情的例子，但似乎没有人能解决我的问题，或者提供的解决方案似乎比我要做的事情复杂得多(分别在x轴和y轴上对齐文本)

.header1 {
  background-color: #000000;
  border: none;
  height: 40px;
  top: 0px;
  left: 0px;
  width: 100%;

}
.margin-zero {
  margin: 0px;
}
.header1Title {
  color: white;
  font-size: 25px;
  height: 40px;
  text-align: right;
  vertical-align: middle;
}

<header class="header1 margin-zero">
  <h1 class="header1Title margin-zero">Luis Argueta</h1>
</header>

推荐答案

您不需要添加很多设置，因为它们是默认设置(顶部0、左侧0、宽度:100%等).

要实现您想要的效果，一种方法是在容器上使用display: flex,justify-content: flex-end;和align-items: center;进行对齐:

.header1 {
  background-color: #000000;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header1Title {
  color: white;
  font-size: 25px;
}

<header class="header1 margin-zero">
  <h1 class="header1Title margin-zero">Luis Argueta</h1>
</header>

Html相关问答推荐

你能让Cypress测试为p—fileUpload做文件上传吗？

有没有一种方法可以用css和html在桌面上并排显示列，在移动设备上显示一个下方的列？

HTML表行悬停仅适用于偶数行

如何在htmlAngular 17的@for中使用索引

将输入字段下方的两个按钮设置为两侧对齐

HTML+CSS+JS动态选中文本高亮 colored颜色变化

在单独的容器之间堆叠上下文

为什么字体大小而不是 colored颜色属性适用于元素？

为什么index.html在Django中有这样的名称？

如何在黑暗模式切换中添加图标

使用shinyjqui拖放到网格表中

是否可以制作响应式 CSS 剪辑路径？

为什么溢出时overflow： auto框的底部有一个小间隙？

文本不显示在 div 下方

第 117 行的块标记无效：endblock，应为empty或endfor.您是否忘记注册或加载此标签？

CSS 跨度与子元素交替 colored颜色

如何将自定义图像插入 Shiny plot header？

项目的水平列表：倒数第二个项目居中，而最后一个项目占据所有剩余空间

HTML 标记未在页面上展开

如何将图像高度设置为等于文本高度？

实用课程推荐