0

I want to have a header on my website with some text which is centred in the page. There should be a button on the same height/line which is aligned to the right.

This is what I've got currently: current appearance

And this is defined like this:

<header>
    <h1>Please Center Me</h1>
    <span class="material-icons">search</span>
</header>

header {
    width: 100%;
    height: auto;
    background-color: #1DA87F;
    color: #EBEF8E;
    font-size: 1.5em;
    display: flex;
}

header h1 {
    margin: auto;
    align-self: center;
}

.material-icons {
    font-size: 1.5em;
    margin: auto;
    align-self: flex-end;
}

As you can see, the "Please Center Me" text is not really centered, it's being off-set by the search text (icon).

WSC
  • 903
  • 10
  • 30
  • Change span do div, style="float: right", text will be centered in header. – Grumpy Jan 08 '23 at 21:13
  • @Grumpy Could you share an example where that works? I've tried using floats but it pushes the search icon below the text, rather than being on the same horizonal alignment. – WSC Jan 08 '23 at 21:16
  • 1
    Does something like this works for you? https://jsfiddle.net/sinisa92/xuzjptb1/ this is using `flex-grow` – SinisaM Jan 08 '23 at 21:23

0 Answers0