Problems with icon positioning

Question

Good morning friends,

I am with a friend creating a site to put in practice our studies, only that we are with a big problem in this social network buttons, we can not position this image in the center of the circles, someone can us give a light?

Here is the HTML/CSS code:

/REDE SOCIAL INTERATICA INICIO/ section {
  margin: 10px auto;
  width: 1200px;
  height: 90px;
}

.rede {
  width: 50px;
  height: 50px;
  float: right;
  margin-left: 30px;
  transition: all 0.4s ease-out;
  border-radius: 50%;
}

.rede#facebook {
  background-color: #2372a3;
}

.rede#twitter {
  background-color: #0084b4;
}

.rede#instagram {
  background-color: #3f729b;
}

.rede#snap {
  background-color: #fc0;
}

.rede#plus {
  background-color: #dd4b39;
}

.rede#youtube {
  background-color: #b00;
}

.icone {
  padding: 3px;
  width: 3%;
  position: absolute;
  margin-right: 15%;
  transform: translate(15%, 15%, 1%);
  float: right;
}

/REDE SOCIAL FINAL/

<h1>Atari Mania</h1>

<section>
  <div class="rede" id="facebook">
    <img class="icone" src="imagens/facebook.png" />
  </div>

  <div class="rede" id="twitter">
    <img class="icone" src="imagens/twitter.png" />
  </div>

  <div class="rede" id="instagram">
    <img class="icone" src="imagens/instagram.png" />
  </div>

  <div class="rede" id="snap">
    <img class="icone" src="imagens/snap.png" />
  </div>

  <div class="rede" id="plus">
    <img class="icone" src="imagens/plus.png" />
  </div>

  <div class="rede" id="youtube">
    <img class="icone" src="imagens/youtube.png" />
  </div>
</section>

thanks in advance for any help!

Answer 1

J.G your code is very close to working out, although Bootstrap makes things easier avoid it for now. The best you can do first is to learn the basics of HTML and CSS before leaving using any framework He’s bringing his things in. Don’t hold on to crutches for a while start learning by walking with your own legs, until by your code I see you’re on the right track!

Now let’s answer that is what matters. As I said your code is almost right. in HTML I didn’t even have to touch, and in CSS I only got 2 or 3 lines.

In class .rede I had to put in position:relative, so that the images inside the balls assume this class as a reference source of size and position.

And in class .icone I just had to adjust the top and left and adjust the transform:translate that you were using wrong shape and ready. Now your image is aligned in the center of the balls.

See the result as it turned out!

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

section {
  margin: 10px auto;
  width: 1200px;
  height: 90px;
  text-align: center;
}

.rede {
  width: 50px;
  height: 50px;
  /* float: right; */
  display: inline-block;
  margin-left: 30px;
  transition: all 0.4s ease-out;
  border-radius: 50%;
  position: relative;
}

.rede#facebook {
  background-color: #2372a3;
}

.rede#twitter {
  background-color: #0084b4;
}

.rede#instagram {
  background-color: #3f729b;
}

.rede#snap {
  background-color: #fc0;
}

.rede#plus {
  background-color: #dd4b39;
}

.rede#youtube {
  background-color: #b00;
}

.icone {
  padding: 3px;
  width: 50%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<h1>Atari Mania</h1>

<section>
    <div class="rede" id="facebook">
    <img class="icone" src="http://placeskull.com/50/50" />
    </div>

    <div class="rede" id="twitter">
    <img class="icone" src="http://placeskull.com/50/50" />
    </div>

    <div class="rede" id="instagram">
    <img class="icone" src="http://placeskull.com/50/50" />
    </div>

    <div class="rede" id="snap">
    <img class="icone" src="http://placeskull.com/50/50" />
    </div>

    <div class="rede" id="plus">
    <img class="icone" src="http://placeskull.com/50/50" />
    </div>

    <div class="rede" id="youtube">
    <img class="icone" src="http://placeskull.com/50/50" />
    </div>
</section>

Answer 2

Apparently it is some part of external code that is interfering. Ex. some position in an external class or variation of width.

As the idea is to put in practice studies, I suggest using a framework for creating views ex Bootstrap (https://getbootstrap.com/) Following and using your Grid concepts makes your site not have this kind of problems and on top of that do using mobile-first concepts.

You can get use of Iconfinder icons (https://www.iconfinder.com/search/? q=youtube&price=free)