CSS Сетка - Align-self чуть выше центра

Question

У меня есть следующий HTML код

   <header>
      <nav>
        <ul>
          <li><a href="#childhood">Childhood</a></li>
          <li><a href="#early-years">Early years</a></li>
          <li><a href="#end">End</a></li>
          <li><a href="#about-this">About this</a></li>
        </ul>
      </nav>

      <div id="header-content">
        <div id="info-title">
          <h1 id="title">Henry Charles Bukowski Jr.</h1>
          <h2>"Find what you love and let it kill you."</h2>
        </div>

        <figure>
          <img src="images/charles-img1-2x.png" alt="Charles Bukowski's picture">
        </figure>
      </div>

      <div id="tribute-info">
        <p>8/16/1920</p>
        <p>3/09/1994</p>
      </div>

      <span class="next">next section</span>
    </header>

, который представляет эту страницу с CSS: https://prnt.sc/qx4qim

CSS:

/* Montserrat font import */
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,600,700&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #2F2E2E;
}

#main {
  font-family: 'Montserrat', sans-serif;
  color: #E0E1DD;
}

header,
section {
  padding: 40px 60px;
  height: calc(100vh - 80px);
}

#childhood,
#end {
  background: #31303B;
}

ul {
  list-style: none;
}

/* text style */

h1 {
  font-weight: bold;
  font-size: 80px;
}

h2 {
  font-weight: 100;
  font-size: 60px;
}

h3 {
  font-weight: 600;
  font-size: 60px
}

h4 {
  font-weight: 600;
  font-size: 50px;
}

p {
  font-weight: 400;
  font-size: 45px;
}

/* text style end */

/* nav link */

nav ul {
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  font-size: 50px;
}

nav ul li a {
  text-decoration: none;
  color: #E0E1DD;
  transition: .3s color;
}

nav ul li a:hover {
  color: rgb(138, 128, 128);
}

/* nav links end */

#header-content {
  display: flex;
}

#info-title{
  align-self: center;
}

header figure img {
  height: auto;
  max-height: 850px;
  max-width: 630px;
}

Я выравниваю тексты на странице с помощью свойства align-self: center; но если я хочу загрузить эти тексты, чтобы они выглядели примерно так: https://prnt.sc/qx4qol Есть ли свойство, которое позволяет мне вводить цифры c для вертикального выравнивания? Свойство top не работает, так как для дисплея установлено значение flex

Answer 1

1. добавить display: flex; и flex-direction: column; в header
2. добавить margin: auto 0; в #header-content

/* Montserrat font import */
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,600,700&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #2F2E2E;
}

#main {
  font-family: 'Montserrat', sans-serif;
  color: #E0E1DD;
}

header,
section {
  padding: 40px 60px;
  height: calc(100vh - 80px);
}

#childhood,
#end {
  background: #31303B;
}

ul {
  list-style: none;
}

/* text style */

h1 {
  font-weight: bold;
  font-size: 80px;
}

h2 {
  font-weight: 100;
  font-size: 60px;
}

h3 {
  font-weight: 600;
  font-size: 60px
}

h4 {
  font-weight: 600;
  font-size: 50px;
}

p {
  font-weight: 400;
  font-size: 45px;
}

/* text style end */

/* nav link */

nav ul {
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  font-size: 50px;
}

nav ul li a {
  text-decoration: none;
  color: #E0E1DD;
  transition: .3s color;
}

nav ul li a:hover {
  color: rgb(138, 128, 128);
}

/* nav links end */

#header-content {
  display: flex;
  margin: auto 0; /*add this*/
}

#info-title{
  align-self: center;
}

header figure img {
  height: auto;
  max-height: 850px;
  max-width: 630px;
}

/* add flex*/
header {
  display: flex;
  flex-direction: column;
}

<header>
      <nav>
        <ul>
          <li><a href="#childhood">Childhood</a></li>
          <li><a href="#early-years">Early years</a></li>
          <li><a href="#end">End</a></li>
          <li><a href="#about-this">About this</a></li>
        </ul>
      </nav>

      <div id="header-content">
        <div id="info-title">
          <h1 id="title">Henry Charles Bukowski Jr.</h1>
          <h2>"Find what you love and let it kill you."</h2>
        </div>

        <figure>
          <img src="images/charles-img1-2x.png" alt="Charles Bukowski's picture">
        </figure>
      </div>

      <div id="tribute-info">
        <p>8/16/1920</p>
        <p>3/09/1994</p>
      </div>

      <span class="next">next section</span>
    </header>

Answer 2

Я думаю, что если вы переместитесь:

<div id="tribute-info">
    <p>8/16/1920</p>
    <p>3/09/1994</p>
</div>

в элемент содержимого заголовка, то измените css на это, следует выполнить трюк:

.header { position: relative; }
.tribute-info { position: absolute; bottom: 15px; left: 15px; }