Home / Questions / 192397
Accepted
Popularfan
Asked: 2020-08-30 03:32:52 +0800 CST 2020-08-30 03:32:52 +0800 CST

How to center horizontally and spaced several elements inside a <div>?

  • 772

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

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

When making the browser window smaller the first 3 elements should be vertically aligned and element 4 should remain horizontally aligned at 3

The code I have centers it vertically for me but I can't get the elements to be evenly spaced horizontally. I also don't know how to make the first 3 elements stand vertically in case the browser window gets 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>

html

2 Answers

  1. Best Answer

    You can do it with justify-content: space-around;to align it horizontally taking up all the space. And to vertically align elements at 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 are used flexbefore you start with this, I leave you this link that is so you can easily understand how all the properties work.

    • 3

  2. 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, it is better to use a framework, example bootstrap

    • 0