Как сложить два тега заголовка вместо бок о бок - PullRequest
Новая
       12

Как сложить два тега заголовка вместо бок о бок

0 голосов
/ 07 апреля 2019

Текущие теги заголовков расположены рядом, и я пытаюсь заставить второй тег заголовка располагаться под первым.

У меня есть теги h1 и h2. Я попытался поместить все это в тег h1 и использовать span, однако стилизация span не очень удобна при определении размера и выравнивании. Я пытаюсь расположить его по центру экрана и разместить подзаголовок непосредственно под заголовком, по центру, без выравнивания по левому краю и рядом с ним. 

header {
  width: 100%;
  height: 100vh;
  background-image: url("underneath.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.wrapper {
  padding-top: 15%;
  color: rgb(240, 240, 240);
  display: flex;
  align-items: center;
  justify-content: center;
}

.name {
  font-size: 6em;
  display: inline;
}

.subtitle {
  display: inline;
}
<header>
  <div class="wrapper">
    <h1 class="name">Answer 42</h1>
    <h2 class="subtitle">Customer Acquistions</h2>
  </div>
</header>

Я пытаюсь создать заголовок для страницы с подзаголовком внизу и отцентрировать его над фоновым изображением, которое я поместил в CSS. Мой текущий код имеет теги заголовка рядом.

1 Ответ

2 голосов
/ 07 апреля 2019

Надеюсь, это простое решение поможет вам. 

header {
    width: 100%;
    height: 100vh;
    background-image: url("underneath.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.wrapper {
    padding-top: 15%;
    color: rgb(240, 240, 240);
}

.name {
    font-size: 6em;
    margin-bottom: 0;
    line-height: 1em;
    text-align: center;
}

.subtitle {
    text-align: center;
    margin-top: 0;
}
<header>
    <div class="wrapper">
        <h1 class="name">Answer 42</h1>
        <h2 class="subtitle">Customer Acquistions</h2>
    </div>
</header>
...