1

I am building a simple header with css flexbox. The header has two elements, a link on the left with an arrow and a title which has to be in the center of the header.

Here a codepen demo: https://codepen.io/anon/pen/VzmZxg

This is the css

.header {
  display: flex;
  background: red;
  flex-direction: row;
  align-items: baseline;
}

.header__link {
  flex-shrink: 1;
  align-self: center;
  height: 25px;
  padding: 15px 10px;
}

.header__title {
  flex-grow: 1;
  text-align: center;
}

As you can see in the demo, the title is in the center of his own block and not all the header element.

enter image description here

Is there any way to achieve it with the same html and using css flexbox?

If you edit the codepen i can accept the answer.

Koala7
  • 1,340
  • 7
  • 41
  • 83

0 Answers0