Align vertically inside div

Question

Align vertically inside div

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)

1

Good!

Could you tell me how to vertically align the green square that is inside the red?

The thing is that this green square contains in turn an image (logo) and this if I can align it with the label line-height: 200px , but said square no.

Where would be the right place to put line-height (or whatever), to get this effect?

To say that before asking, I have been reading the forum and from there I have taken out the line-height , but I can not get the green line too.

Thanks

.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>

css3 css

asked by NEA 03.09.2017 в 16:26

source

3 answers

0

If I understand correctly, you want to place a margin of 5px around the green box. You could solve it by placing a padding to the red box, without more:

.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>

answered by 03.09.2017 в 16:37

0

I have managed to solve it, making "Brand_General" be position:relative and "Brand_Individual" be position:absolute . Although honestly and at the risk of appearing foolish, I do not know why it is solved.

Greetings and apologies for asking a question so similar to others already there.

answered by 03.09.2017 в 16:41

Post Order (back and forth to BackEnd) from angularjs Error with promise and cycle for

score 3 · Accepted Answer

One solution that you could use to center the div vertically within your container is to use the property display: flex and the own property of flexbox align-items: center in the container. In this way, the div will be centered vertically in the container.

Example:

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>