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 class="logos">
<div class="row">
<div class="logo">
<img src="logo1.svg" alt="logo"/>
<a href=# alt="vestuario">vestuário e acessórios</a>
</div>
<div class="logo">
<img src="logo2.svg" alt="logo"/>
<a href=# alt="saude">saúde e bem-estar</a>
</div>
<div class="logo">
<img src="logo3.svg" alt="logo"/>
<a href=# alt="restauracao">restauração</a>
</div>
<div class="logo">
<img src="logo4.svg" alt="logo"/>
<a href=# alt="casa">casa, decoração e bricolage</a>
</div>
</div>
<div class="row">
<div class="logo">
<img src="logo5.svg" alt="logo"/>
<a href=# alt="alimentar">alimentar</a>
</div>
<div class="logo">
<img src="logo6.svg" alt="logo"/>
<a href=# alt="informatica">informática e acessórios</a>
</div>
<div class="logo">
<img src="logo7.svg" alt="logo"/>
<a href=# alt="alojamento">alojamento</a>
</div>
<div class="logo">
<img src="logo8.svg" alt="logo"/>
<a href=# alt="cultura">cultura e lazer</a>
</div>
</div>
</div>
You can use below code for the same,
here I’ve applied display:flex to row,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Try</title>
<style>
.logos {
display: flex;
/* flex-direction: row; */
}
.row {
display: flex;
max-width: 500px;
/* flex-direction: row; */
flex-wrap: wrap;
}
.logo {
text-transform: uppercase;
text-align: center;
padding: 0px 0px 89px 61px;
height: 132px;
width: 159px;
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
.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;
}
</style>
</head>
<body>
<div class="logos">
<div class="row">
<div class="logo">
<img src="logo1.svg" alt="logo"/>
<a href=# alt="vestuario">vestuário e acessórios</a>
</div>
<div class="logo">
<img src="logo2.svg" alt="logo"/>
<a href=# alt="saude">saúde e bem-estar</a>
</div>
<div class="logo">
<img src="logo3.svg" alt="logo"/>
<a href=# alt="restauracao">restauração</a>
</div>
<div class="logo">
<img src="logo4.svg" alt="logo"/>
<a href=# alt="casa">casa, decoração e bricolage</a>
</div>
</div>
<div class="row">
<div class="logo">
<img src="logo5.svg" alt="logo"/>
<a href=# alt="alimentar">alimentar</a>
</div>
<div class="logo">
<img src="logo6.svg" alt="logo"/>
<a href=# alt="informatica">informática e acessórios</a>
</div>
<div class="logo">
<img src="logo7.svg" alt="logo"/>
<a href=# alt="alojamento">alojamento</a>
</div>
<div class="logo">
<img src="logo8.svg" alt="logo"/>
<a href=# alt="cultura">cultura e lazer</a>
</div>
</div>
</div>
</body>
</html>
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 column, so, instead of having 2 rows of 4 elements, I get 2 columns of 4 elements.
My html markup:
<div class="logos">
<div class="row">
<div class="logo">
<img src="logo1.svg" alt="logo"/>
<a href=# alt="vestuario">vestuário e acessórios</a>
</div>
<div class="logo">
<img src="logo2.svg" alt="logo"/>
<a href=# alt="saude">saúde e bem-estar</a>
</div>
<div class="logo">
<img src="logo3.svg" alt="logo"/>
<a href=# alt="restauracao">restauração</a>
</div>
<div class="logo">
<img src="logo4.svg" alt="logo"/>
<a href=# alt="casa">casa, decoração e bricolage</a>
</div>
</div>
<div class="row">
<div class="logo">
<img src="logo5.svg" alt="logo"/>
<a href=# alt="alimentar">alimentar</a>
</div>
<div class="logo">
<img src="logo6.svg" alt="logo"/>
<a href=# alt="informatica">informática e acessórios</a>
</div>
<div class="logo">
<img src="logo7.svg" alt="logo"/>
<a href=# alt="alojamento">alojamento</a>
</div>
<div class="logo">
<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;
}
.logos should have flex-direction: column, if you want them displayed one under another.
