CODEWITHSUNDEEP
htmlcss
peterHasemann
peterHasemann

Reputation: 1590

Center items correctly when using justify-content: space-between

I created a header bar and want to place 3 items there. The first should be aligned on the left side, the second in the middle of the header and the third on the right side.

I went for this

body{
  background: #eeeeee;
}

#header {
  background: #ffffff;
  height: 53px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.headerEle {
  
}
<div id="header">
  <img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">

  <a class="headerEle" href="https://www.google.de/">Google</a>

  <button class="headerEle">Logout</button>
</div>

but when using justify-content: space-between; the items don't get centered correctly. The image takes a bigger place than the small button on the right.

So the link in the middle is not centered correctly, it overlaps the right side. I want the link being in the horizontal center of the page.

Upvotes: 1

Views: 4309

Answers (4)

First Last
First Last

Reputation: 1

It's a lot easier to implement using grid 

body{
  background: #eee;
}

#header {
  background-color: #fff;
  display: grid;
  height: 53px;
  grid-auto-flow: column;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

button.headerEle {
   justify-self: end;
}
<div id="header">
  <img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">

  <a class="headerEle" href="https://www.google.de/">Google</a>

  <button class="headerEle">Logout</button>
</div>

Upvotes: 0

VXp
VXp

Reputation: 12078

You can do something like this:

body {
  background: #eee;
}

#header {
  background: #fff;
  height: 53px;
  display: flex;
  /*flex-direction: row; not necessary, by default*/
  align-items: center;
  justify-content: space-between;
}

#header > span {flex: 1} /* each 33.33% of the parent's width */

img {display: block; max-width: 100%; max-height: 100vh} /* responsiveness; "display: block" removes bottom margin/whitespace */

.link {
  display: flex;
  justify-content: center; /* horizontally centered */
}

.btn {
  display: flex;
  justify-content: flex-end; /* placed far right */
}
<div id="header">
  <span>
    <img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
  </span>
  <span class="link">
    <a class="headerEle" href="https://www.google.de/">Google</a>
  </span>
  <span class="btn">
    <button class="headerEle">Logout</button>
  </span>
</div>

Upvotes: 3

Ben Morris
Ben Morris

Reputation: 282

Is this what you are looking to do?

body{
  background: #eeeeee;
}

#header {
  background: #ffffff;
  height: 53px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#header > div {
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */
    flex: 1;
    text-align: center;
}

<div id="header">
    <div>
        <img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
    </div>
    <div>
        <a class="headerEle" href="https://www.google.de/">Google</a>
    </div>
    <div>
        <button class="headerEle">Logout</button>
    </div>
</div>

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

You can use absolute positioning for the <a> element to exactly center the link on the header:

body{
  background: #eeeeee;
}
#header {
  background: #ffffff;
  height: 53px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position:relative;
}
#header a {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
<div id="header">
  <img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
  <a class="headerEle" href="https://www.google.de/">Google</a>
  <button class="headerEle">Logout</button>
</div>

Upvotes: 1

Related Questions