float elements and center in the middle

Question

Hi I have made short section with information about contact; facebook,number,mail. I have two question because I read about float and without clearfix parent of floated element shouldn't has height in my case div.contact has 36px of height. Secondly I would like to center text next to icon how is the fastest way to do it?

.visit {
  background-color:black;
  padding: 10px 25px;
  color: white;
  font-family: Saira, sans-serif;
  font-weight: normal;
}

.visit img {
  height: 36px;
  float: left;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
     <div class="visit">
        <div class="contact">
          <img src="https://i.postimg.cc/Vk5vJ3w3/contact1.png" alt="mail" />
          <span>1231@gmail.com</span>
        </div>
        <div class="contact">
          <img src="https://i.postimg.cc/XYcW7LGT/contact2.png" alt="phone" />
          <span>501501501</span>
        </div>
        <div class="contact">
          <img src="https://i.postimg.cc/7Yts12vf/contact3.png" alt="facebook" />
          <span>1231</span>
        </div>
        </div>
      </div>
    </div>
  </section>
  <footer></footer>
  </body>
</html>

it seems your didn't understand clearifx correctly, check the duplicates for more details — Temani Afif, Aug 03 '22 at 22:35
Well I thought we use clearfix to get rid of float for next elements in code. I asked someone and is it true div.contact takes height from span element? — jasper93, Aug 04 '22 at 05:36

score 2 · Answer 1 · answered Aug 03 '22 at 20:02

Don't use float use flex instead on .contact with align-items: center;.

.visit {
  background-color: black;
  padding: 10px 25px;
  color: white;
  font-family: Saira, sans-serif;
  font-weight: normal;
}

.visit img {
  height: 36px;
}

.contact {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.contact:not(:last-child) {
  margin-bottom: 1em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="visit">
    <div class="contact">
      <img src="https://i.postimg.cc/Vk5vJ3w3/contact1.png" alt="mail" />
      <span>1231@gmail.com</span>
    </div>
    <div class="contact">
      <img src="https://i.postimg.cc/XYcW7LGT/contact2.png" alt="phone" />
      <span>(123)-456-7890</span>
    </div>
    <div class="contact">
      <img src="https://i.postimg.cc/7Yts12vf/contact3.png" alt="facebook" />
      <span>Facebook</span>
    </div>
  </div>
  <footer></footer>
</body>

</html>

Thank you for a different approach to the problem but currently i'm learing about float so I would like why elements behave like this. — jasper93, Aug 03 '22 at 20:22
You asked for the fastest way. This is it. Most efficient also. — Kameron, Aug 03 '22 at 21:40

float elements and center in the middle

1 Answers1