css 如何在HTML中将文本垂直居中的同时向右对齐？

chy5wohz 于 2024-01-09 发布在其他

关注(0)|答案(4)|浏览(133)

此问题在此处已有答案：

How do I vertically align text in a div?（34个答案）
昨天就关门了。
我正在学习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;
}

个字符

css

来源：https://stackoverflow.com/questions/77774584/how-to-align-text-to-the-right-while-centering-it-vertically-in-html

4条答案

按热度按时间

5lhxktic1#

如果要右对齐，可以使用justify-content：flex-end;如果要垂直居中，可以使用justify-items：center;

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

    /* added styles */
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

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

字符串

赞(0）回复(0）举报 2024-01-09

pxyaymoc2#

你不需要很多你添加的设置，因为它们是默认设置（顶部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;
}

个字符

赞(0）回复(0）举报 2024-01-09

uqxowvwt3#

如果你刚开始学习HTML和CSS，我建议你学习flex属性。这是垂直对齐元素的最简单方法。在父元素.header1中添加display: flex;，用于将容器设置为flexbox。align-items: center;将垂直对齐子元素，justify-content: end;将其发送到父容器的末尾。

.header1 {
  background-color: #000000;
  border: none;
  height: 40px;
  top: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.margin-zero {
  margin: 0px;
}

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

个字符

赞(0）回复(0）举报 2024-01-09

ma8fv8wu4#

我不知道你试图实现什么，你仍然可以独立地移动元素的位置在X和Y像这样使用px和margin-top属性移动元素从顶部。

.class-name {
  margin-top: 200px;
  margin-bottom: 100px;
  margin-right: 200px;
  margin-left: 100px;

}

字符串

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

    }
    .margin-zero {
      margin-top: 100px;
      margin-right: 50px;
    }
    .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）举报 2024-01-09

我来回答

css 如何在HTML中将文本垂直居中的同时向右对齐？

4条答案

相关问题

热门标签

最新问答