Question

对不起，如果这是一个非常基本的问题。但我有一个高度为350px的标题。我有一个h1，我希望它垂直位于标题的中心。我使用＆＃34; text-align：center;＆＃34;它水平对齐但不垂直对齐。请帮忙吗？

HTML

@Root(name = "item", strict = false)
public class FeedTag{

   @Element(name = "title", required = false)
   private String title;

   @Path("comments")
   @ElementList(name = "item", required = false)
   private List<CommentTag> comments;

   @Path("medias")
   @ElementList(name = "item", required = false)
   private List<MediaTag> medias;

   //empty constructor, setter, getter...    

}

CSS

<body>
    <header>
      <h1> Cian Designs </h1>
    </header>

</body>

Answer 1

因此，在h1中，您可以将上边距更改为大约150px margin-top:150px;

Answer 2

看看这个帮助，你可以有两行或更多行，结果是相同的......

＆＃13;

header {
  display: flex;
  justify-content: center;
  background-color: #FAFAFA;

  position: fixed;
  width: 100%;
  min-height: 350px;
  background-image: url("../resources/img/header.png");
  background-position: center;
  background-size: cover;
}

header h1 {
  align-self: center;

  text-align: center;
  font-family: Roboto;
  font-size: 50px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
}

＆＃13;

<header>
  <h1>Heading 1</h1>
</header>

＆＃13;

使用填充：160px 0 之类的填充而不是迷你高度，并且你总是将H1置于中心。

在标题中垂直对齐<h1>

2 个答案: