如何在HTML中实现文本右对齐且垂直居中？

简单解决方法 #

方法1：使用Flex布局（推荐，简洁易维护）

只需要修改.header1的样式，利用Flex布局一键实现水平右对齐+垂直居中：

.header1 {
  background-color: #000000;
  border: none;
  height: 40px;
  width: 100%;
  /* 新增Flex相关属性 */
  display: flex;
  justify-content: flex-end; /* 实现水平右对齐 */
  align-items: center; /* 实现垂直居中 */
}
.margin-zero {
  margin: 0px;
}
.header1Title {
  color: white;
  font-size: 25px;
  /* 可移除原有的height和vertical-align，Flex已处理对齐逻辑 */
}

HTML代码保持不变即可。

方法2：使用Line-height匹配容器高度

如果不想用Flex，也可以给标题设置与头部容器高度一致的line-height，配合text-align:right实现需求：

.header1 {
  background-color: #000000;
  border: none;
  height: 40px;
  width: 100%;
}
.margin-zero {
  margin: 0px;
}
.header1Title {
  color: white;
  font-size: 25px;
  text-align: right;
  /* 新增line-height，与容器高度一致实现垂直居中 */
  line-height: 40px;
  /* 移除无效的height和vertical-align */
}

注：原来的vertical-align:middle不生效，是因为该属性仅对行内元素、行内块元素或表格单元格生效，而<h1>是块级元素，因此这个属性在这里不起作用。

内容的提问来源于stack exchange，提问作者largueta11