1

Buenas!

¿Podriais decirme como alinear verticalmente el cuadrado verde que está dentro del rojo?

La cosa es que este cuadrado verde contienen a su vez una imagen (logo) y este si consigo alinearlo mediante la etiqueta line-height: 200px, pero dicho cuadrado no.

¿Donde sería el lugar correcto para poner line-height (o lo que sea), para conseguir este efecto?

Decir que antes de preguntar, he estado leyendo el foro y de allí he sacado lo del line-height, pero no consigo que el verde se alinee también.

Gracias

.Marca_General {
  height: 110px;
  width: 80%;
  background-color: red;
  margin: auto;
  /* Alinea verticalmente los logos */
  line-height: 200px;
}

.Marca_Individual {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 5px;
}
<html>

<body>
  <div class="Marca_General">
    <div class="Marca_Individual">
      <img src="Img/Iconos/logoBombilla.png" alt="">
    </div>
  </div>
</body>

</html>

4
  • 1
    Deberías buscar en el sitio: hay múltiples preguntas similares a ésta (con código algo diferente) que ya tienen soluciones que te van a servir. Por ejemplo: una, otra, otra
    – Alvaro Montoro
    Commented el 3 sept. 2017 a las 14:30
  • Por eso puse esto, "Decir que antes de preguntar, he estado leyendo el foro y de allí he sacado lo del line-height, pero no consigo que el verde se alinee también." Se que hay varias, pero aun con eso no se hacerlo bien, he conseguido la mitad, que era alinear el logo, pero su contenedor no soy capaz. ¿Podrías poner el enlace de una que diga eso? Sintiendolo mucho, estoy en mis inicios y se que tengo dudas muy básicas. Un saludo.
    – Lleims
    Commented el 3 sept. 2017 a las 14:35
  • 1
    Perdón si he sonado algo brusco, no era mi intención. Las dudas básicas son bienvenidas, no todos los programadores aquí somos expertos.
    – Alvaro Montoro
    Commented el 3 sept. 2017 a las 14:49
  • No pasa nada :) Agradezco muchísimo vuestra ayuda, porque aunque avanzo lento, en gran medida es sitio. Saludos!
    – Lleims
    Commented el 3 sept. 2017 a las 14:56

3 respuestas 3

3

Una solución que podrías utilizar para centrar el div verticalmente dentro de su contenedor es utilizar la propiedad display: flex y la propiedad propia de flexbox align-items: center en el contenedor. De esta manera, el div se centrará verticalmente en el contenedor.

Ejemplo:

html,body{
  box-sizing: border-box;
}

.Marca_General {
  display: flex; /* NUEVO */
  align-items: center; /* NUEVO */
  height: 350px;
  width: 80%;
  background-color: red;
  margin: auto;
  /* Alinea verticalmente los logos */
  line-height: 200px;
}

.Marca_Individual {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 5px;
}
<html>

<body>
  <div class="Marca_General">
    <div class="Marca_Individual">
      <img src="Img/Iconos/logoBombilla.png" alt="">
    </div>
  </div>
</body>

</html>

0

Si he entendido bien quieres colocar un margen de 5px alrededor del cuadro verde. Podrías solucionarlo colocando un padding al cuadro rojo, sin más:

.Marca_General {
  width: 80%;
  background-color: red;
  margin: auto;
  padding: 5px;
  /* Alinea verticalmente los logos */
  line-height: 200px;
}

.Marca_Individual {
  width: 100px;
  height: 100px;
  background-color: green;
}
<html>

<body>
  <div class="Marca_General">
    <div class="Marca_Individual">
      <img src="Img/Iconos/logoBombilla.png" alt="">
    </div>
  </div>
</body>

</html>

1
  • Gracias, con eso y modificando el tamaño de la roja se conseguiía el efecto visual que quería. Otra manera es poniendole un box-sizing: border-box y tu solución de padding. :)
    – Lleims
    Commented el 3 sept. 2017 a las 14:39
0

He conseguido solucionarlo, haciendo que "Marca_General" sea position:relativey "Marca_Individual" sea position:absolute. Aunque sinceramente y a riesgo de parecer necio, no se porque se soluciona.

Un saludo y disculpas por hacer una pregunta tan similar a otras que ya hay.

1
  • En realidad no te lo está alineando. Es simplemente mera casualidad, ya que tienes que el margen es 5px y le has añadido 110px al contenedor, por lo que se queda "alineado verticalmente". position: absolute, teniendo position: relative en el contenedor lo que te permite es establecer el segundo div en referencia al primero. Si tienes dudas sobre como funciona el posicionamiento puedes leer la pregunta/respuesta que di aquí: es.stackoverflow.com/questions/37930/… Commented el 3 sept. 2017 a las 15:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.