Foros del Web » Creando para Internet » CSS »

centrar iconos a container

Estas en el tema de centrar iconos a container en el foro de CSS en Foros del Web. como puedo adaptar el container a los iconos y el container pasarlo al lado derecho @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div style = ...
  #1 (permalink)  
Antiguo 13/06/2018, 16:16
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 8 años, 8 meses
Puntos: 0
centrar iconos a container

como puedo adaptar el container a los iconos y el container pasarlo al lado derecho

Código HTML:
Ver original
  1. <div style="background:#0099cc; font-size:22px; text-align:center; color:#FFF; font-weight:bold; height:100px; padding-top:50px;">
  2.     <span>Blueprint</span>
  3.                 <div class="container">
  4.                     <nav>
  5.                         <a href="" data-info="Iniciar Sesión"><i class="fas fa-user-plus"></i></a>
  6.                         <a href="" data-info="Carrito"><i class="fas fa-shopping-cart"></i></a>
  7.                         <a href="" data-info="Perfil"><i class="fas fa-user-edit"></i></a>
  8.                         <a href="" data-info="Salir"><i class="fas fa-sign-out-alt"></i></a>
  9.                     </nav>
  10.                 </div>
  11. </div>


Código CSS:
Ver original
  1. .container > nav a {
  2.     display: inline-block;
  3.     position: relative;
  4.     text-align: center;
  5.     width: 2.5em;
  6.     height: 2.5em;
  7.     background: #fff;
  8.     border-radius: 50%;
  9.     margin: 0 0.1em;
  10.     border: 4px solid #47a3da;
  11. }
  12.  
  13. .container > nav a:hover:before {
  14.     content: attr(data-info);
  15.     color: #47a3da;
  16.     position: absolute;
  17.     width: 600%;
  18.     top: 120%;
  19.     text-align: right;
  20.     right: 0;
  21.     pointer-events: none;
  22. }
  23.  
  24. .container > nav a:hover {
  25.     background: #47a3da;

Última edición por saulrayados; 13/06/2018 a las 17:25

Etiquetas: container, hover, iconos, lado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:10.