我无法水平对齐 2 行

Question

我开始学习网络开发，遇到了一个问题，这让我很困惑。

所以，我想要一个有 2 行的 div，在每一行中我有 4 个 divs，在每个 div 中有一个图像和一些文本，那个我要居中，图片在文字上方。

出于某种原因，我没有看到每一行的行为都像一列，因此，我得到的不是 2 行 4 个元素，而是 2 列 4 个元素。

我的 html 标记：

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

我的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;
 }

Answer 1

您需要将 .logos 方向更改为第 flex-direction: column;

列

然后指定.row显示为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>

Answer 2

您可以使用下面的代码，在这里，我将 display:flex 应用到 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>

我无法水平对齐 2 行

I can't align 2 rows horizontally

html

css

flexbox