I can't align 2 rows horizontally

user_17976506 0
Viewed 59

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;
 }
flexbox css html
2 Answers

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>

user_182545380

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>
user_182404330
Related