1

I'm implementing a header with elements side-by-side - icon on the left and title on the right.

The title is center-aligned.

When the screen is narrowed and the title wraps onto the next line, a space is created between the icon and title.

Demo image

As you can see in the screenshot, the space is part of the content (it's not padding or margin).

How can I get the title to sit against the icon even when the title wraps onto a new line?

Here is the basic HTML and CSS to reproduce:

HTML

<div class="container">
  <svg class="svg" height="50" width="50">
    <circle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red" />
  </svg> 
  <h1 class="title">The title of the page</h1>
</div>

CSS

.container {
  width: 320px; /* simulate mobile width */
  
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.title {
  text-align: center;
}

Codepen link to try it out: https://codepen.io/JayC_IRL/pen/VwKoJVQ

Jay
  • 558
  • 1
  • 7
  • 23
  • As far as I know, this is not possible with CSS (and it is hard with javascript). ( I would like to be wrong, ) – vals Jan 27 '21 at 18:20

0 Answers0