Home / Questions / 360219
Accepted
Josep Giner
Asked: 2020-05-29 10:04:05 +0800 CST 2020-05-29 10:04:05 +0800 CST

How can I center the title, the icons of facebook, twitter and gmail so that they are aligned?

  • 772

I would like to know how I can center the icons https://imgur.com/a/kPHrvHs and also the title since I have had several problems regarding that. I have been trying on my own but it does not work out for me, if someone could help me I would greatly appreciate it

#imagenes{
  max-width: 10%;
  padding-top: 1%;
  float: left;
}
#imagen2{
  float: left;
  max-width: 10%;
  padding-top: 2%;

}
#facebook{
  float: right;
  max-width: 10%;
  padding-top: 2%;
}
<section class="contacto">
   <p id="titulo17">Contacto</p>
   <div id="imagenes">
     <a href="https://twitter.com/josepginer17"><img src="img/twitterlogo.png"></a>   
   </div>
   <div id="imagen2">
    <a href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox"><img src="img/gmail.jpg"></a>
   </div>
   <div id="facebook">
    <a href="https://www.facebook.com/"><img src="img/facebook.jpg"></a>
   </div>
 </section>
html

1 Answers

  1. Best Answer

    here I leave the modification and solution based on your code, I hope I have solved your problem :) let me know if you have any questions, greetings.

    .seccion{
  width: 100%; /* Acá a defines que la sección use el 100% de ancho, lo puedes cambiar a tu gusto*/
   display: inline-block; /* Acá alineas el contenido dentro de la seccion (No aplica a los div, ya que estos por defecto usan el 100% de ancho de donde están) */
}

.divTitulo{
  text-align: center; /* Acá alineas el texto del div al centro */
}

.divImagenes{
  text-align: center; /* Lo mismo, alineas las imagenes dentro del div al centro */
}

.imagen{
  heigth: 50px;
  width: 50px;
}

.logoGmail{
  padding-bottom: 5px;
  heigth: 50px;
  width: 50px;
}
    <section class="seccion">
  <div class="divTitulo">
    <p>Contacto</p>
    </div>
   
    <div class="divImagenes">
     <a href="https://twitter.com/josepginer17"><img class="imagen" src="https://images.vexels.com/media/users/3/137419/isolated/preview/b1a3fab214230557053ed1c4bf17b46c-icono-de-twitter-logo-by-vexels.png"></a>   
    <a href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox"><img class="imagen logoGmail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/1200px-Gmail_Icon.svg.png"></a>
   
    <a href="https://www.facebook.com/"><img class="imagen" src="https://i.pinimg.com/originals/0f/38/15/0f3815e59ec1ab026baab9cfd95eefcb.png"></a>
      </div>
 </section>

    • 1