Search code examples
htmlcssflexboxcentering

Centering an element between two siblings in flexbox

My title is being centered inside the flex box content area of my webpage. It's about 30 pixels to the right. Should I change the dimensions of the flex box? If so, how? Advice is greatly appreciated! 

a {
  outline: 0;
}

body {
  background: linear-gradient(to bottom, #1D4350, #A43931);
  background-attachment: scroll;
  font-family: 'PT Mono', monospace;
}

html,
body,
.wrapper {
  max-width: 100%;
  min-height: 100%;
  min-width: 960px;
  margin: 0 auto;
}

.wrapper {
  position: relative;
}

.content {
  height: 1200px;
}

.header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.Octagon {
  color: #2aa186;
  line-height: 30%;
  margin-top: 25px;
}

.LT {
  color: #3a5454;
  line-height: 0;
  font-style: italic;
  text-align: center;
  position: relative;
  bottom: 33px;
}

.boi {
  position: relative;
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.iob {
  position: relative;
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.boi:active,
.iob:active {
  top: 3px;
}

.boi:hover,
.iob:hover {
  text-shadow: 0 0 10px #a193ff;
}

.manyarms,
.colorful {
  position: absolute;
  margin-top: 30px;
  margin-left: 30px;
}

.A1 img {
  -webkit-transition: all 0.75s ease-in-out;
  -moz-transition: all 0.75s ease-in-out;
  -ms-transition: all 0.75s ease-in-out;
  -o-transition: all 0.75s ease-in-out;
  transition: all 0.75s ease-in-out;
}

.manyarms,
.A1:hover .colorful {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.A1:hover .manyarms,
.colorful {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}

.A2 img {
  -webkit-transition: all 0.75s ease-in-out;
  -moz-transition: all 0.75s ease-in-out;
  -ms-transition: all 0.75s ease-in-out;
  -o-transition: all 0.75s ease-in-out;
  transition: all 0.75s ease-in-out;
}

.sensible,
.A2:hover .BlueBoi {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.A2:hover .sensible,
.BlueBoi {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}

.sensible,
.BlueBoi {
  margin-top: 30px;
  margin-right: 20px;
  right: 10px;
  position: absolute;
}

.VS {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.verr {
  padding-left: 31px;
  padding-top: 263px;
}

.special {
  padding-right: 71px;
  padding-top: 263px;
}

.footer {
  bottom: 0;
  left: 0;
  margin-right: 10px;
  position: fixed;
  text-align: right;
  width: 100%;
}
<div class="wrapper">
  <div class="header">
    <a href="https://www.google.com/?gws_rd=ssl" target="_blank" style="text-decoration: none;">
      <p class="iob">Information</p>
    </a>
    <h1 class="Octagon">The Pragmatic Octopus</h1>
    <a href="https://www.google.com/?gws_rd=ssl" style="text-decoration: none;" target="_blank">
      <p class="boi">Contact</p>
    </a>
  </div>
  <p class="LT">Certes</p>
  <div class="content">
    <div class="A1">
      <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792.jpg" alt="hecc" style="width:310px; height:250px;" class="manyarms">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/de/71/29/de71292c5df818b418fe09cbca9c49c2.jpg" alt="hecc2" style="width:310px; height:250px;" class="colorful">
    </div>
    <div class="A2">
      <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="hecc3" style="width:310px; height:250px;" class="sensible">
      <img src="http://img03.deviantart.net/a0a6/i/2010/007/6/4/octopus_by_mnk7.jpg" alt="hecc4" style="width:310px; height:250px;" class="BlueBoi">
    </div>
    <div class="VS">
      <p style="color: #6458b7;" class="verr">Here comes a very special boi!</p>
      <p style="color:#6458b7;" class="special">He loves to pose for photos!</p>
    </div>
  </div>
  <div class="footer">
    &copy;Hecc™®
  </div>
</div>

Solution

  • Here's the code you're using to align your flex items:

    .header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

    With space-between the "Information" and "Contact" elements will be positioned at opposite edges of the container.

    Because a flex container aligns items based on the distribution of free space, your middle item will be centered between them, not necessarily centered on the page.

    With "Information" having a computed width of 174px, and "Contact" having a computed width of 135px, the middle item is off-center by 39px.

    In order for the middle item to be centered on the page, its siblings would need to be equal width, so there is an equal balance of space on both sides.

    The following post has two methods for centering items in a flex container when siblings vary in size: