I can't align 2 rows horizontally-CodePudding

Hi I'm starting to learn web development and I came across a problem that it is really confusing me.

So, I want to have a div with 2 rows, inside each row I have 4 divs, inside each div a have an image and some text, that I want to be centered, and with the image above the text. For some reason that i'm not seeing each row is behaving like a collumn, so, instead of having 2 rows of 4 elements, I get 2 collumns of 4 elements.

my html code:

<div >
                <div >
                    <div >
                        <img src="logo1.svg" alt="logo"/>
                        <a href=# alt="vestuario">vestuário e acessórios</a>
                    </div>
                    <div >
                        <img src="logo2.svg" alt="logo"/>
                        <a href=# alt="saude">saúde e bem-estar</a>
                    </div>
                    <div >
                        <img src="logo3.svg" alt="logo"/>
                        <a href=# alt="restauracao">restauração</a>
                    </div>
                    <div >
                        <img src="logo4.svg" alt="logo"/>
                        <a href=# alt="casa">casa, decoração e bricolage</a>
                    </div>
                </div>    
                <div >
                    <div >
                        <img src="logo5.svg" alt="logo"/>
                        <a href=# alt="alimentar">alimentar</a>
                    </div>
                    <div >
                        <img src="logo6.svg" alt="logo"/>
                        <a href=# alt="informatica">informática e acessórios</a>
                    </div>
                    <div >
                        <img src="logo7.svg" alt="logo"/>
                        <a href=# alt="alojamento">alojamento</a>
                    </div>
                    <div >
                        <img src="logo8.svg" alt="logo"/>
                        <a href=# alt="cultura">cultura e lazer</a>
                    </div>
                </div>       
            </div>

my css:

.logos{ display: flex; flex-direction: row; }

.logo{ text-transform: uppercase; text-align: center; padding: 0px 0px 89px 61px; height: 132px; width: 159px; }

.logo a{ padding-top: 16px; text-decoration: none; color: #262626; font-family: "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 2.5px; line-height: 20px; text-align: center; }

CodePudding user response：

you need to change .logos direction to column flex-direction: column;

Then specify .row display as flex

.row{display:flex;}

.logos{ 
  display: flex;
  flex-direction: column;
}
.row{
  display:flex;
}

.logo{ 
  text-transform: uppercase; 
  text-align: center; 
  padding: 0px 0px 89px 61px; 
  height: 132px; 
  width: 159px; 
}

.logo a{ 
  padding-top: 16px; 
  text-decoration: none; 
  color: #262626; 
  font-family: "Helvetica Neue", 
    sans-serif; 
  font-size: 12px; 
  font-weight: 500; 
  letter-spacing: 2.5px; 
  line-height: 20px; 
  text-align: center; 
}

img{
  content:url("https://picsum.photos/200")
}

<div >
                <div >
                    <div >
                        <img src="logo1.svg" alt="logo"/>
                        <a href=# alt="vestuario">vestuário e acessórios</a>
                    </div>
                    <div >
                        <img src="logo2.svg" alt="logo"/>
                        <a href=# alt="saude">saúde e bem-estar</a>
                    </div>
                    <div >
                        <img src="logo3.svg" alt="logo"/>
                        <a href=# alt="restauracao">restauração</a>
                    </div>
                    <div >
                        <img src="logo4.svg" alt="logo"/>
                        <a href=# alt="casa">casa, decoração e bricolage</a>
                    </div>
                </div>    
                <div >
                    <div >
                        <img src="logo5.svg" alt="logo"/>
                        <a href=# alt="alimentar">alimentar</a>
                    </div>
                    <div >
                        <img src="logo6.svg" alt="logo"/>
                        <a href=# alt="informatica">informática e acessórios</a>
                    </div>
                    <div >
                        <img src="logo7.svg" alt="logo"/>
                        <a href=# alt="alojamento">alojamento</a>
                    </div>
                    <div >
                        <img src="logo8.svg" alt="logo"/>
                        <a href=# alt="cultura">cultura e lazer</a>
                    </div>
                </div>       
            </div>