Positioning text in a HTML5 header?

Question

So, what I am trying to do is center my text in the header. And what I mean by this, is not the center of the page, but center it to where there is an equal gap on the top and bottom of the header. I don't want it to sit in the upper left corner with a large gap of blank space beneath it. I want it aligned to the left at the center of the header's left edge. If that makes sense. I just can't figure out how to do it correctly so any tips would be greatly appreciated.

The header code:

<header>
    <!-- <img style="display: inline;" src="images/someimage.jpg" height="150" width="184" alt="sOME TEXT" /> -->
    <h1 style="display: inline;">SOME TEXT</h1>
    <h1 style="display: inline;">SOME TEXT</h1>
    <h1 style="display: inline;">SOME TEXT</h1>
    <h1 style="display: inline;">SOME TEXT</h1>
</header>

The CSS associated with the header:

header {
    background-color: #af9483;
    height: 140px;
    background-image: url('');
    background-repeat: no-repeat;
    border-top: 5px #9f7e69 solid;
    border-bottom: 5px #9f7e69 solid;
}

h1 {
    font-family: "times new roman";
    color: #523225;
    text-align: center;
    padding-bottom: 70px;
    padding-right: 100px;
    font-size: 2em;
}

score 0 · Accepted Answer · answered Mar 13 '21 at 02:10

I think it can help you.

header {
    background-color: #af9483;
    height: 140px;
    background-image: url('');
    background-repeat: no-repeat;
    border-top: 5px #9f7e69 solid;
    border-bottom: 5px #9f7e69 solid;
    display: flex;
    align-items: center;
}

h1 {
    font-family: "times new roman";
    color: #523225;
    text-align: center;
    font-size: 2em;
    padding: 0 50px;
}

<header>
  <!-- <img style="display: inline;" src="images/someimage.jpg" height="150" width="184" alt="sOME TEXT" /> -->
  <h1 style="display: inline;">SOME TEXT</h1>
  <h1 style="display: inline;">SOME TEXT</h1>
  <h1 style="display: inline;">SOME TEXT</h1>
  <h1 style="display: inline;">SOME TEXT</h1>
</header>

Positioning text in a HTML5 header?

1 Answers1