How to center horizontally and spaced several elements within a div?

Question

How to center horizontally and spaced several elements within a div?

Navigation

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

2

I have within a <div> several elements <span> , <button> and <img> aligned horizontally.

I need them to be centered vertically. They must be between them horizontally aligned and spaced occupying 100% of <div> .

By making the browser window smaller, the first 3 elements must be aligned vertically and element 4 must remain horizontally aligned at 3

The code that I have focuses vertically on me but I can not get the elements to be placed equally in horizontal spacing. I also do not know how to make the first 3 elements to be placed vertically in case the browser window becomes smaller.

#container {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items; center;"
}

<div id="container">
    <span class="t1">Elemento1</span>
    <span class="t2">Elemento2</span>
    <button class="b1">Elemento3</button>
    <img class="i1">Elemento4</img>
</div>

html5 html css3 css

asked by Popularfan 29.08.2018 в 13:32

source

2 answers

0

Try this:

/*Para alinear en vertical cuando se haga pequeña la ventana*/

#container span,#container button,#container img{
    display: inline-block;
    width:20%;
}

For a better work with styles, better to use a framework, example bootstrap

answered by 29.08.2018 в 16:09

Save date in unix format in Mysql CSS error, apply style to the wrong item

score 3 · Accepted Answer

You can do it with justify-content: space-around; to align horizontally occupying all the space. And to vertically align the elements in small resolutions, you can use flex-direction: column; .

body {
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  /* muestra elementos con la misma separación alrededor de ellos */
  justify-content: space-around;
  /* alinea los elementos verticalmente */
  align-items: center;
}

/* media query para mobile */
@media (max-width: 480px) {
  #container {
    /* cambio la dirección de los elementos*/
    flex-direction: column;
  }
}

<div id="container">
    <span class="t1">Elemento1</span>
    <span class="t2">Elemento2</span>
    <button class="b1">Elemento3</button>
    <img class="i1" src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" />
</div>

Note

I recommend that you see how all the elements of flex are used well before you start with this, I leave you this link which is so you can easily understand how all the properties work.