Centering a div to the viewport with other divs on both sides-CodePudding

I'm currently designing a header bar for a site I'm working on. I would like the header to show a logo at the left, the title in the center, and the user account on the right.

This mockup is what I'm envisioning. Note that the dotted boxes denote a div.

I've made some progress on creating it in HTML/CSS, but I can't seem to get the title to center to the viewport.

As you can see, the title is centering itself between the logo and the account info divs, instead of centering itself on the viewport. This ends up making the page just look a little bit off, and so I would really like to center the title to the viewport.

Here's my HTML:

<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>

Here's my 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;
}

Any ideas on what I could do to make the title div centered to the viewport, instead of centering between the two divs?

CodePudding user response：

html code

 <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-3 align-self-end">3</div>
    </div>

css code

.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;
  
  padding: 0;
  margin: 0;
  list-style: none;
}

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

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

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

code output

code solution

used flex to place the items https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

Replace your css code with this to make title div centered in all the viewport.

.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;
}

CodePudding user response：

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

It is an easy way to the layout. you can try it.

CodePudding user response：

Try adding margin-left:auto; and margin-right:auto; to the .titleArea class .

I would suggest using a flex-box though.