javascript - 怎么获得s并排

Question

我创建了这些 div 用作重定向到不同站点页面的按钮，但由于某种原因，我无法让它们并排放置。我已经尝试了包括 flexbox 在内的所有方法，但我似乎无法将 div 并排放置。我究竟做错了什么。

有没有更简单的方法来完成我想要完成的事情？还是我检查了一个简单的错误。

html, body {
    margin: 0;
    height: 100%;
}
.img_container {
    border: none;
    width: 70%;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #b3ab7d;
}
a:hover {
    color: #b3ab7d;
}
.background {
    background: #104723;
    width: 150px;
    height: 150px;
}
.img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
a {
    display: block;
    text-align: center;
}
.text{
  font-size: 70%;
}
*{
    box-sizing: border-box;
}
.center {
    justify-content: center;
    align-items: center;
}

<div class="center">
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Access Control (AC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Identification & Authentication (IA)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Media Protection (MP)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Physical Protection (PE)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Communications Protection (SC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Information Integrity (SI)</span>
    </div>
    </a>
</div>
</div>

标签： javascripthtmlcss

Answer 1

你忘记display: flex;了你的.center班级名称。

检查您更新的代码段。

html, body {
    margin: 0;
    height: 100%;
}
.img_container {
    border: none;
    width: 70%;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #b3ab7d;
}
a:hover {
    color: #b3ab7d;
}
.background {
    background: #104723;
    width: 150px;
    height: 150px;
}
.img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
a {
    display: block;
    text-align: center;
}
.text{
  font-size: 70%;
}
*{
    box-sizing: border-box;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="center">
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Access Control (AC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Identification & Authentication (IA)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Media Protection (MP)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Physical Protection (PE)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Communications Protection (SC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Information Integrity (SI)</span>
    </div>
    </a>
</div>
</div>