Блог

В настоящее время я разрабатываю панель заголовка для сайта, над которым работаю. Я бы хотел, чтобы в заголовке слева был логотип, заголовок в центре и учетная запись пользователя справа.

Этот макет — это то, что я себе представляю. Обратите внимание, что пунктирные поля обозначают div.

Я добился некоторого прогресса в его создании в HTML/CSS, но, похоже, не могу расположить заголовок по центру окна просмотра.

Как вы можете видеть, заголовок центрируется между логотипом и разделами информации об учетной записи, вместо того, чтобы центрироваться на экране просмотра. Это приводит к тому, что страница просто выглядит немного не так, и поэтому я действительно хотел бы расположить заголовок по центру окна просмотра.

Вот мой код:

 .headerBarArea {
    background-color: #7785A2;
    border: 0;
    padding: 0;
    width: 100%;    
    display: inline-block;
    text-align: center;
}

.logoArea {
    display: inline;
    text-align: center;
    float: left;

    border: lawngreen;
    border-style: dashed;
    border-width: 1px;
}

.minesLogo {
    width: 96px;
}

.titleArea {
    display: inline-block;
    text-align: center;

    border: lawngreen;
    border-style: dashed;
    border-width: 1px;
}

.siteTitle {
    color: white;
}

.pageTitle {
    color: white;
}

.userAccountArea {
    display: inline;
    text-align: center;
    float: right;

    border: lawngreen;
    border-style: dashed;
    border-width: 1px;
}

.userAccountIcon {
    float: left;
    width: 35px;
}

.userAccountText {
    float: right;
} 

 <div className="headerBarArea">
    <div className="logoArea">
        <img src="assets/mines_logo_stacked.png" className="minesLogo" />
    </div>

    <div className="titleArea">
        <h2 className="siteTitle">This is my site Title</h2>
        <h3 className="pageTitle">Page Title</h3>
    </div>

    <div className="userAccountArea">
        <img src="assets/user_account.png" className="userAccountIcon" />
        <span className="UserAccountText">John Smith (Student)</span>
    </div>
</div> 

Есть какие-нибудь идеи о том, что я мог бы сделать, чтобы заголовок div был центрирован в окне просмотра, а не между двумя разделителями?

html-код

    <div class="flex-container">
     <div class="flex-item">1</div>
     <div class="align-self-center">
        <span class="siteTitle">This is my site Title</span>
        <br>
        <div class="text-center ">Page Title</div>
     </div>
    <div class="flex-item align-self-end third-item">3</div>
   </div>
 

Код CSS

   .flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-between;

}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.third-item {
  height: 100px;
}

.text-center{
  text-align: center;
}
.align-self-end{
  align-self:end;
}
.align-self-center{
  align-self:center;
}
 

вывод кода

кодовое решение

используется flex для размещения элементов, используемых .flex-контейнер в качестве родительского div, в котором размещаются элементы flex .обоснование-содержимое: пространство между; используется для размещения пространства между элементами. выравнивание по центру; используется для размещения заголовка страницы по центру https://css-tricks.com/snippets/css/a-guide-to-flexbox/

кодовый набор

 .headerBarArea{
    display:flex;
    justify-content: space-between;
    align-items: center
}
 

Это простой способ верстки.
вы можете попробовать это.

Попробуйте добавить поле слева:авто; и поле справа:авто; в класс .titleArea .

Однако я бы предложил использовать гибкую коробку.

Замените свой css-код на этот, чтобы сделать заголовок div по центру во всем окне просмотра.

 .headerBarArea {
    background-color: #7785A2;
    border: 0;
    padding: 0;
    width: 100%;    
    display:flex;
    justify-content: space-between;

}

.logoArea , .titleArea , .userAccountArea {
    border: lawngreen;
    border-style: dashed;
    border-width: 1px;
}

.minesLogo {
    width: 96px;
}

.titleArea {
    text-align: center;
   
}

.siteTitle , .pageTitle{
    color: white;
}


.userAccountIcon {
    float: left;
    width: 35px;
}

.userAccountText {
    float: right;
}