How to align a vector icon in css

Question

How to align a vector icon in css

Navigation

#1 by (1 votes)

0

/* montserrat-100 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v12-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Thin'), local('Montserrat-Thin'),
  url('../fonts/montserrat-v12-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-100.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-200 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v12-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'),
  url('../fonts/montserrat-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-200.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light'), local('Montserrat-Light'),
  url('../fonts/montserrat-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-300.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
  url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
  url('../fonts/montserrat-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-500.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
  url('../fonts/montserrat-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/montserrat-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/montserrat-v12-latin-600.woff') format('woff'), /* Modern Browsers */
  url('../fonts/montserrat-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/montserrat-v12-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}


*{
  margin: 0;
  padding: 0;
}
body{
  color: rgb(40,40,40);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}

section{
  padding: 70px 50px;
}

h4{
  text-transform: uppercase;
  text-align: center;
  padding-top: 30px;
  font-weight: 100;
}

h3{
  font-weight: 200;
}

h5{
  font-weight: 500;
  padding: 10px;
}


aside{
  background-color: rgb(227, 233, 239);
  padding: 30px 0 50px 0;
}

a{
  text-decoration: none;
  color: white;
}

p{
  text-align: left;
}

small{
  display: block;
  text-align: center;
}

footer{
background-color: rgb(244, 246, 249);
  padding: 100px 0 70px 0;
}

.menu{
  background-color: black;
  padding: 8px;
}

.menu img{
  width: 90px;
}

.menu ul{
  float: right;
}

.menu ul a{
  padding: 5px 8px;
}

.menu ul a:hover{
  font-size: 16px;
}

.menu li{
  display: inline-block;
  font-size: 13px;
}



.hero{
  background: url('../materiales/imagenes/hero_background2.jpg') no-repeat bottom / cover fixed;
}

.hero h4{
  color: white;
}

.section2{
  background: url('../materiales/imagenes/cancan-background.jpg') no-repeat top / cover fixed;
}

.section2 h2, .section2 p{
  color: white;
  letter-spacing: 2px;
  font-weight: 100;
  text-align: left;
  padding: 20px 0;
}


.imgCenter {
  display: block;
  margin: 0 auto;
}

.imageHero{
  width: 60%;
  padding: 30px 0 200px 0;
}

.bigLogo{
  width: 300px;
}

.imgFooter{
  padding-bottom: 20px;
}

 small a{
   display: inline-block;
   margin-top: 30px;
  /*width: 100px;*/
  /*padding-bottom: 50px;*/
  color: grey;
}

.section1 li{
  float: left;
  list-style: none;
  width: 20%;
  text-align: center;
  padding: 20px 0;
}

.section1 a{
  font-weight: 500;
  color: black;
}

.section1 article, .section3 article {
  float: left;
  width: calc(33.33% - 81px);
  text-align: center;
  padding: 30px;
  margin: 10px;
}

.section2 article{
  float: left;
  width: calc(50% - 40px);
  margin: 20px;
}

.clearfix{
  clear: both;
}

section .icons::before{
  font-size: 2em;
  display: inline-block;
  /*Como centrarlo sin dar margen, queda feo*/
  margin-right: 18px;
}

.botonNegro{
  background-color: rgb(24, 24, 25);
  border-radius: 3px;
  padding: 5px 10px;
  letter-spacing: 1px;
  width: 150px;
  text-align: center;
  display: block;
  margin: 14px auto;
}

.botonBlanco{
  color: black;
  font-weight: 500;
  background-color: white;
  border-radius: 3px;
  padding: 5px 10px;
  letter-spacing: 1px;
  width: 150px;
  text-align: center;
  display: inline-block;
  margin-top: 20px;
}

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <!-- Descripcion de nuestra pagina -->
  <meta name="description" content="Tu servicio para eventos, contamos con un equipo de azafatas con aplia experiencia para todo tipo de eventos">
  <title>Clock events | Ayuda para eventos</title>
  <!-- Favicones -->
  <link rel="icon" type="image/png" href="materiales/imagenes/favicon-114.png" sizes="114x114">
  <!-- font icons -->
  <link rel="stylesheet" href="css/font/flaticon.css">
  <!-- Stylesheet -->
  <link rel="stylesheet" href="css/style.css">

</head>
<body>
  <header>
    <nav class="menu">
      <a href="#"><img src="materiales/imagenes/logo-white.png" alt="logo"></a>
      <ul>
        <li><a hreflang="en" href="en/">EN</a></li>
      </ul>
      <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="#">Personal</a></li>
        <li><a href="#">Equipo</a></li>
        <li><a href="#">Clientes</a></li>
        <li><a href="#">Galería</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <header class="hero">
      <h4>Personal. Proyeccion y servicios para eventos</h4>
      <figure>
        <img class="imgCenter imageHero" src="materiales/imagenes/big-logo.png" alt="Clock events logo">
      </figure>
    </header>
    <section class="section1">
      <h4 class="nuestrosServicios">Nuestros servicios</h4>
      <ul>
        <li><i class="flaticon-woman icons"></i><h5>Azafatas</h5></li>
        <li><i class="flaticon-male-user icons"></i><h5>Animación</h5></li>
        <li><i class="flaticon-monitor icons"></i><h5>Fotógrafos</h5></li>
        <li><i class="flaticon-pencil icons"></i><h5>Creativos</h5></li>
        <li><i class="flaticon-monitor icons"></i><h5>Programadores</h5></li>
      </ul>
      <div class="clearfix">
      </div>
      <article>
        <header>
          <h3>    Clock Events cuenta con un equipo propio de azafatas con amplia experiencia en toda clase de eventos</h3>
        </header>
      </article>
      <article>
        <p>Mediante un minucioso proceso de selección, encontramos al profesional que mejor se ajusta a tus necesidades para ofrecer la mejor imagen de tu empresa.</p>
      </article>
      <article>
        <p>Ponemos a tu disposición profesionales formados específicamente para protocolo, ferias, congresos, entregas de premios, transfers e imagen, entre otros.</p>
        <a class="" href="#">Más informacion sobre azafatas</a>
      </article>
      <div class="clearfix">

      </div>
    </section>
    <aside class="aside1">
      <h4>Apuntate a nuestro newsletter</h4>
      <p><a class="botonNegro" href="#" title="suscríbete">Suscríbete</a></p>
      <small>Olvida el spam. Nosotros tambien lo detestamos</small>
    </aside>
    <section class="section2">
      <article>
        <header>
          <h2>¿Buscas soluciones para diferenciar tu evento?</h2>
          <p>Desde un show de Can-can al más puro estilo Far West hasta una noche de risa y terror en un caserón maldito. Lo tenemos.</p>
          <p><a class="botonBlanco" href="#">Contáctanos</a></p>

        </header>
      </article>
      <article>
        <figure>
          <img class="imgCenter bigLogo" src="materiales/imagenes/logo-detalle.png" alt="logo reloj">
        </figure>
      </article>
      <div class="clearfix">
      </div>
    </section>
    <section class="section3">
      <h4>Nuestros valores</h4>
      <div class="superior">
        <article>
          <i class="flaticon-flag icons"></i>
          <h5>Siempre estamos ahi</h5>
          <p>Cada persona es un mundo, y cada evento es diferente. No concebimos una atenciÛn que no sea personalizada, cercana, profesional y cálida.</p>
        </article>
        <article>
          <i class="flaticon-megaphone icons"></i>
          <h5>Somos creativos</h5>
          <p>La originalidad en la planificación y ejecución de nuestros proyectos nos permite plasmar en cada uno de ellos nuestro sello personal: la diferenciación.
          </p>
        </article>
        <article>
          <i class="flaticon-like icons"></i>
          <h5>Tenemos pasión</h5>
          <p>Y la plasmamos en cada uno de los proyectos. Y la contagiamos. Tenemos el privilegio de amar lo que hacemos, y lo hacemos con el corazón.
          </p>
        </article>
        <div class="clearfix"></div>
      </div>
      <div class="inferior">
        <article>
          <i class="flaticon-wallet-with-card-sticking-out icons"></i>
          <h5>Cuidamos tu inversión</h5>
          <p>Somos conscientes del valor que tiene una inversión en nuestro trabajo, y nuestro objetivo es tu satisfacción con la misma. Vamos más allá de tus expectativas.</p>
        </article>
        <article>
          <i class="flaticon-line-chart icons"></i>
          <h5>Somos equipo</h5>
          <p>Gracias a que disponemos de unos recursos humanos seleccionados y coordinados especÌficamente para ti, podemos garantizar la calidad y calidez de nuestros servicios. Sabemos con quién trabajamos.
          </p>
        </article>
        <article>
          <i class="flaticon-hourglass icons"></i>
          <h5>Lo coordinamos</h5>
          <p>La coordinación activa y personal de cualquiera de nuestros servicios está incluida en los mismos. Estaremos allí, en tu evento, contigo. Nosotros nos ocupamos.
          </p>
        </article>
        <div class="clearfix"></div>
      </div>
    </section>
  </main>
  <footer>
    <img class="imgCenter imgFooter" src="materiales/imagenes/logo-footer.png" alt="logo_footer">
    <small><a href="#" rel="nofollow" target="_blank"> Clock events 2015 | </a><a href="#" rel="nofollow" target="_blank"> Aviso legal</a><a href="#" rel="nofollow" target="_blank"> Cookies</a></small>
  </footer>
</body>
</html>

Hello, I do not know how to center this vector icon, it behaves like text but it is inline-block since I can not give it up and down, I want to know how to center the icon next to the text below ... you can see that gives a default margin when I put it in block to cover the remaining space, I do not know how to fix this, is not aligned any suggestions?

html css

asked by francisco dwq 20.01.2018 в 13:21

source

1 answer

Problems with Login in php Help error when uploading my project django a heroku

score 1 · Answer 1

In the father div as you have already been told ..

.padre {
    display: flex;
    flex-flow: column wrap;
    align-content: center;
}

The elements that are inside the div. will be placed one below the other and aligned to the center of the parent div

I think it's the most efficient solution