How to align more than one inside a
?

Question

I'm trying to align this 6 images iside a div, but the CSS make then aligned, but they know are in a vertical line, but I want them side-by-side Desired result

div#menu-lixos img{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

<div id="linha-laranja" class="linha-laranja">
        <h1 class="titulo">Materiais Recicláveis</h1>
        <h2 class="titulo2">histórias e propriedades</h2>
        <div id="menu-lixos" class="menu-lixos">
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
        </div>
    </div>

you said you want `them side-by-side`. what are you trying to do ? you want them vertically center ? — sanoj lawrence, May 14 '20 at 15:00
You set them to display:block, why? Also, IDs **must** be unique — j08691, May 14 '20 at 15:01

score 1 · Answer 1 · answered May 14 '20 at 15:02

Try adding display: flex; to the container, and then setting the flex "settings" to what you want:

#linha-laranja #menu-lixos {
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
}

<div id="linha-laranja" class="linha-laranja">
        <h1 class="titulo">Materiais Recicláveis</h1>
        <h2 class="titulo2">histórias e propriedades</h2>
        <div id="menu-lixos" class="menu-lixos">
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
        </div>
    </div>

You can then add justify-content and align-items properties to get the spacing correct. Hope this works for you!

thanks man!! but I just added a text-align:center; and this solved my problem LOL — Gabriel Tarifa, May 14 '20 at 15:11

score 0 · Accepted Answer · answered May 14 '20 at 15:00

0

Add the CSS property display:flex to .menu-lixos. This will line up its child elements in a row. And then you can you can add some subsequent CSS properties to .menu-lixos — such as justify-content and align-items — to get the spacing right.

answered May 14 '20 at 15:00

rguttersohn

332
3
10

How to align more than one inside a ?

2 Answers2

How to align more than one inside a
?