Search code examples
cssflexboxpositioningcentering

Vertically centering element to it's siblings height

I'm trying to center vertically .container img:nth-child(2) to its siblings height but it just doesn't work. I tried to center it vertically with a lot of commands (and adding it to both - .container and .child) but nothing happened. enter image description here Also, when the window is scaled down, I want the first .container img child to be centered and above the second one. The whole container should also be horizontally aligned to the center of browser windows width (screenshot attached).enter image description here

Is it possible without using media queries? Could you guys help me out? I'm a beginner and I'm really trying to figure those displays and positioning out...

body {
  margin: 0;
}
.parent {
  background-image:url("http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
  background-size: cover;
  flex-wrap: wrap;
  height: 100vh;
  position: relative;
}
.parent h1 {
  margin-top:0;
  padding-top: 2em;
  text-align: center;
  font-family: helvetica;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: absolute;
  bottom: 2em;
  width: 100%;
}

.child {
  display: inline-flex;
  padding: 0 5px;
}

.container img {
  float: left;
}

.container a {
  opacity: 0.5;
}

.container a:hover {
  opacity: 1;
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>random title</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="parent">
  <h1>Heading example</h1>
  <div class="container">
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
</div>
  
  
</body>
</html>

Solution

  • You can use nested flexbox with media queries.

    Make each anchor link as flexbox.

    .container a {
  display: flex;
  align-items: center;
  justify-content: center;
}

    Switch flex-direction value in the media queries.

    @media (max-width: 768px) {
  .container a {
    flex-direction: column;
  }
}


    body {
  margin: 0;
}
.parent {
  background-image: url("http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
  background-size: cover;
  flex-wrap: wrap;
  height: 100vh;
  position: relative;
}
.parent h1 {
  margin-top: 0;
  padding-top: 2em;
  text-align: center;
  font-family: helvetica;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* align-content: center; */
  position: absolute;
  bottom: 2em;
  width: 100%;
}
.child {
  padding: 0 5px;
}
.container img {
  /* float: left; */
}
.container a {
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container a:hover {
  opacity: 1;
}
@media (max-width: 768px) {
  .container a {
    flex-direction: column;
  }
}
    <div class="parent">
  <h1>Heading example</h1>
  <div class="container">
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
  </div>