Home / Questions / 413651
Accepted
Javier fr
Asked: 2021-12-11 14:13:40 +0800 CST 2021-12-11 14:13:40 +0800 CST

Separate and center squares on a row

  • 772

I am trying to center all 3 squares and place a gap between each one.

I already tried several things, but I can't separate them and center the 3 squares on a row using css.

Could someone support me please.

Design

<!DOCTYPE html>
<html>
<head>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta charset="utf-8">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

html {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  height: 400px;
  margin-bottom: 16px;
  padding: 0 8px;
  background-color: #003056;
  color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
}

.card {
  margin: 7%;
}

.header {
  text-align: center;
  background-color: #83B93A;
  color: #ffffff;
  padding: 15px;
}

.container {
  padding: 0 16px;
}
.circulo{
  margin: auto;
  width: 80px;
  height: 80px; 
  background-color: #63A70A; 
  border-radius: 50%;
  padding: 10px;
}
.image-circle{
  width:50%;
  display: inline; 
  margin: 0 auto; 
  margin-top: 25%
}

@media screen and (max-width: 650px) {
  .column {
    width: 80%;
    display: block;
  }
}
</style>
</head>
<body>

<div class="header">
  <img src="http://intranet.ucq.mx/UCQIntranet/assets/img/logo.jpg" alt="image" style="width: 30%;height: auto;">
</div>

<h2 style="text-align:center;">Credenciales de acceso</h2>
<div class="row" style="text-align: center;">

    <div class="column">
        <div class="card">
          <div class="circulo">
            <img class="image-circle" src="http://intranet.ucq.mx/UCQIntranet/assets/img/correo.png" alt="EMAIL">
          </div>
          <div class="container">
            <h2>Correo del Alumno</h2>
            <p>Correo: [email protected]</p>
            <p>Contraseña: ucq12345</p>
          </div>
        </div>
    </div>

    <div class="column">
        <div class="card">
          <div class="circulo">
            <img class="image-circle" src="http://intranet.ucq.mx/UCQIntranet/assets/img/wifi.png" alt="WIFI">
          </div>
          <div class="container">
            <h2>WIFI del Alumno</h2>
            <p>Contraseña: ucq12345</p>
          </div>
        </div>
    </div>

    <div class="column">
        <div class="card">
          <div class="circulo">
            <img class="image-circle" src="http://intranet.ucq.mx/UCQIntranet/assets/img/elearning.png" alt="PORTAL">
          </div>
          <div class="container">
            <h2>Portal del Alumno</h2>
            <p>Correo: ucq12345</p>
            <p>Contraseña: ucq12345</p>
          </div>
        </div>
    </div>

</div>

</body>
</html>

enter image description here

html

1 Answers

  1. Best Answer

    I would do the following:

    • To the container with the class rowyou give adisplay: flex;
    • To place a space between elements, we make use of:justify-content: space-around;
    • I don't see the use of float: left;so I would remove it
    • Now to handle the distribution of the elements, you can set in the existing media query to stack the elements and finally center them

    Code:

        <!DOCTYPE html>
    <html>
    <head>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <meta charset="utf-8">
    <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    html {
      box-sizing: border-box;
    }

    .column {
      width: 30%;
      height: 400px;
      margin-bottom: 16px;
      padding: 0 8px;
      background-color: #003056;
      color: #fff;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
    }

    .card {
      margin: 7%;
    }

    .header {
      text-align: center;
      background-color: #83B93A;
      color: #ffffff;
      padding: 15px;
    }

    .container {
      padding: 0 16px;
    }
    .circulo{
      margin: auto;
      width: 80px;
      height: 80px; 
      background-color: #63A70A; 
      border-radius: 50%;
      padding: 10px;
    }
    .image-circle{
      width:50%;
      display: inline; 
      margin: 0 auto; 
      margin-top: 25%
    }
      .row {
        display: flex;
        justify-content: space-around;
      }
    @media screen and (max-width: 650px) {
      .column {
        width: 80%;
        display: block;
      }
      .row {
        flex-direction: column;
        align-items: center;
      }
    }
    </style>
    </head>
    <body>

    <div class="header">
      <img src="http://intranet.ucq.mx/UCQIntranet/assets/img/logo.jpg" alt="image" style="width: 30%;height: auto;">
    </div>

    <h2 style="text-align:center;">Credenciales de acceso</h2>
    <div class="row" style="text-align: center;">

        <div class="column">
            <div class="card">
              <div class="circulo">
                <img class="image-circle" src="http://intranet.ucq.mx/UCQIntranet/assets/img/correo.png" alt="EMAIL">
              </div>
              <div class="container">
                <h2>Correo del Alumno</h2>
                <p>Correo: [email protected]</p>
                <p>Contraseña: ucq12345</p>
              </div>
            </div>
        </div>

        <div class="column">
            <div class="card">
              <div class="circulo">
                <img class="image-circle" src="http://intranet.ucq.mx/UCQIntranet/assets/img/wifi.png" alt="WIFI">
              </div>
              <div class="container">
                <h2>WIFI del Alumno</h2>
                <p>Contraseña: ucq12345</p>
              </div>
            </div>
        </div>

        <div class="column">
            <div class="card">
              <div class="circulo">
                <img class="image-circle" src="http://intranet.ucq.mx/UCQIntranet/assets/img/elearning.png" alt="PORTAL">
              </div>
              <div class="container">
                <h2>Portal del Alumno</h2>
                <p>Correo: ucq12345</p>
                <p>Contraseña: ucq12345</p>
              </div>
            </div>
        </div>

    </div>

    </body>
    </html>

    References

    • 1