Align divs vertically to middle (middle)

Question

Align divs vertically to middle (middle)

Navigation

#1 by (2 votes)

4

I have the following code:

@charset "utf-8";
/* CSS Document */
img {
	border: 0;
	max-width: 100%;
}
div.cabecalho {
	position:relative;
	width:100%;
	height:200px;
	border:.1px solid #000000;
}
div.cabecalho div.logo,
div.cabecalho div.whats,
div.cabecalho div.contato,
div.cabecalho div.medias {
	position:relative;
	display:inline-block;
	vertical-align:middle;
	line-height:70%;
}
div.cabecalho div.logo {
	width:43%;
}

<div class="cabecalho">
  <div class="logo">
    <img src="http://funerariasaopedro.net.br/novo/_img/logoFuneraria.png"alt="Logo"/>
  </div>
  <div class="whats"></div>
  <div class="contato"></div>
  <div class="medias"></div>
</div>

The goal is to have 4 divs within div inline and aligned vertically to the middle.

Where am I going wrong?

Goal:

css css3

asked by anonymous 27.04.2018 / 16:42

1 answer

Authentication jwt with vuejs Is there any way to detect the second monitor / screen with Javascript?

score 2 · Accepted Answer

You can use the align-self property of flexbox !

To do this, you would have to make sure that the div parent is display: flex to be able to distribute the elements in a homogeneous way and in div daughter to be able to align their elements to the center!

For example, I did a quick sketch on the Codepen to help!