Как централизовать содержимое в моем заголовке h1

Question

В настоящее время мое содержимое h1 не может быть отцентрировано, кто-то может мне помочь с этим?

h1{
width: 100%;
vertical-align: middle;
color: rgb(5, 5, 5);
font-size:25px;
letter-spacing: 0px;
top: 0;

text-align: left;

padding: 10;
}h1:after
{
    content:' ';
    display:block;
    border:2px solid rgb(122, 119, 119);
}

Это мой css, и он дает мне этот результат

ОБНОВЛЕНИЕ: Это мои коды h1, я поставил неправильный набор кодов ранее

<div class="header">   
    <h1> <img src="/Physics Tutor/images/logo.jpg" height = "50">Physics Tutor Portal     
        <button><a href="Shiyun.html">Unanswered Question</a></button>
        <button><a href="index.html">Manage Quiz</a></button>
        <button><a href="Kim.html">Quiz Results</a></button>
        <button><a href="Yvonne.html">Student's Feedbacks</a></button>

        <style>

            button > a:hover {
              background-color: #df54d8;
            }

        </style>
    </h1>
    </div>

Answer 1

Вы используете H2, но вы определяете H1 в CSS. Замените H1 на H2 или H2 на H1. После этого определите в CSS text-align: center;

Answer 2

Ваш тег html, упомянутый в css, отличается, а в коде JSX другой. Демонстрационная версия

Измените это. HTML

<div class="content">
    <h1>Manage Quiz</h1> 
    <form id="add-cafe-form">
        <input type="text" name="question" placeholder="Quiz Question">
        <input type="text" name="right" placeholder="Right Answer">
        <input type="text" name="wrong" placeholder="Wrong Answer">
        <button>Add Question</button>
    </form>
    <ul id="esequiz-list"></ul>
</div>

CSS

    h1 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
    h2{
    width: 100%;
    vertical-align: middle;
    color: rgb(5, 5, 5);
    font-size:25px;
    letter-spacing: 0px;
    top: 0;
    text-align: left;
    padding: 10;
    }
    h2:after {
     content:' ';
     display:block;
     border:2px solid rgb(122, 119, 119);
    }

Answer 3

Пожалуйста, проверьте сейчас. я изменил код

HTML

<div class="header">   
    <h1>Physics Tutor Portal</h1>  
        <form>
          <button><a href="Shiyun.html">Unanswered Question</a></button>
          <button><a href="index.html">Manage Quiz</a></button>
          <button><a href="Kim.html">Quiz Results</a></button>
          <button><a href="Yvonne.html">Student's Feedbacks</a></button>
        </form>        
</div>  

css

h1{
    width: 100%;
    vertical-align: middle;
    color: rgb(5, 5, 5);
    font-size:25px;
    letter-spacing: 0px;
    top: 0;
    text-align:center;
    padding: 10px;
}
h1:after{
    content:' ';
    display:block;
    border:2px solid rgb(122, 119, 119);
}
button > a:hover {
   background-color: #df54d8;
}