Align Ivs vertically to center (Middle)

Asked

Viewed 966 times

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 that the 4 divs within the div stay inline and aligned vertically to the centre (Middle).

Where am I going wrong?

Goal:

inserir a descrição da imagem aqui

css css3

  • Carlos is a little confused as to what you want. It would have like to put an image of the layout you need, or better explain what would be this alignment that you want.

  • Yes. I have the head div. Ok? I have 4 daughter Ivs inside her (so Whats, contact and media). Ok? These 4 Ivs are inline display to queue rather than block. OK? So, only that the vertical alignment of the 4 Divs daughters, would like it to be centered in relation to the father div. Improved?

  • Possible duplicate of How best to center an element vertically and horizontally?

  • The problem is in case I have 4 Divs to center and not just 1 equal to the examples given in the other post.

1 answer

2


You can use the property align-self of flexbox!

For this, you would need to set that div father is display: flex to be able to distribute the elements homogeneously and in the div daughter to be able to align its elements to the center!

To illustrate, I made a quick sketch on Codepen to help!

  • I get it. But does this way have how to put responsive? That is, the columns, as the screen decreases, you go down each other and keep the size?

  • To leave responsive just use you Media Query and go defining the properties according to the resolution! I changed the Codepen adding some breakpoints for tablet and desktop.

  • thank you very much!

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.