Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

Vertically centering a float – Artificial Intelligence

I’m currently working on a challenge that requires me to obtain the following format in desktop:

enter image description here

And the following in mobile:

enter image description here

Where I’m struggling is trying to get the left and right info-boxes vertically centered with the center info-boxes (as it is in the desktop mode.)

I figured using floats was the most intuitive (for me). I’ve been trying to use relative positioning to center them, but I’m not sure that can work. Likewise, the usual vertical centering tricks don’t seem to be working (as they often require absolute positioning.) Any ideas as to what might work best? Here’s the little bit of code I have so far.

/* || Main Properties */

.main-container {
  margin-left: 10vw;
  margin-right: 10vw;
}


/* || Top Text */

.top-text {
  margin-left: 25vw;
  margin-right: 25vw;
  text-align: center;
}


/* || Info-Boxes */

.box {
  padding: 20px;
  width: 30%;
}

.center-box {
  margin-left: auto;
  margin-right: auto;
}

.left-box {
  float: left;
  position: relative;
}

.right-box {
  float: right;
  position: relative;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link media="screen" rel="stylesheet" href="stylesheet.css">
  <title>Frontend Mentor | Four card feature section</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution {
      font-size: 11px;
      text-align: center;
    }
    
    .attribution a {
      color: hsl(228, 45%, 44%);
    }
  </style>
</head>

<body>
  <div class="main-container">
    <div class="top-text">
      <div>Reliable, efficient delivery</div>
      <div>Powered by Technology</div>
      <div>
        Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful
      </div>
    </div>
    <div class="box-container">
      <div class="box left-box">
        Supervisor Monitors activity to identify project roadblocks
      </div>
      <div class="box center-box">
        Team Builder Scans our talent network to create the optimal team for your project
      </div>
      <div class="box center-box">
        Karma Regularly evaluates our talent to ensure quality
      </div>
      <div class="box right-box">
        Calculator Uses data from past projects to provide better delivery estimates
      </div>
    </div>
  </div>
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Aaron McDonald</a>.
    </p>
  </footer>
</body>

</html>

CSS:
Tags:

2

Answers


  1. 0

    Have you looked into using bootstrap cards? They take care of the floating for you!

    If the position on the element is relative, I think using

    margin:0 auto;
display:block;

    has always worked for me regarding centering.

    Login or Signup to reply.
  2. 0

    Floats and relative positioning are both really unsuitable for this. Use flexbox instead. align-items: center; will take care of the vertical centring.

    Here is an example which does a simple version of your desktop layout.

    If you put the #container files inside a media query that only applies it to wider browser windows, it will collapse back into the simple vertical column order when that media query doesn’t apply.

    div.box {
  padding: 10px;
  border: solid black 1px;
  margin: 10px;
  width: 20px;
  text-align: center;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div id="container">
  <div class="box">A</div>
  <div class="wrapper">
    <div class="box">B</div>
    <div class="box">C</div>
  </div>
  <div class="box">D</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search