我无法对齐 html 页面上的图像图像，我该怎么办？

Question

我的 html 页面中有 2 个 div 字段。在每个字段中，我列出了 5 个图像图像。我在下面的 div 中并排放置了 5 张图像。但我无法让它排队。我的前端知识不好，怎么办？

页面图片：

如您所见，它们没有排成一列，图像在上方和下方。如何让它保持一致？

HTML代码：

@{
    Layout = null;
}
<link href="~/Content/bscarousel.css" rel="stylesheet" />
<script src="~/Scripts/Home/Slider.js"></script>
<style>
    .items {
        display: flex;
        justify-content: space-evenly; /* this gives even space between items as shown in your image in the question */
        background-color: #4C8C9E;
    }

</style>

<div ng-controller="SliderController">
    <div class="items">
        
        <a href="#">
            <img class="img-responsive" src="~/images/ShamanKing.jpg" style="height:130px;"/><p style="color:white; text-align:center">Shaman King</p>
        </a>

        <a href="#">
            <br />
            <img class="img-responsive" src="~/images/Limit.jpg" style="height:130px;"/><p style="color:white; text-align:center">Limit</p>
        </a>

        <a href="#">
            <br />
            <img class="img-responsive" src="~/images/DeathNote.jpg" style="height:130px;"/><p style="color:white; text-align:center">Death Note</p>
        </a>

        <a href="#">
            <br />
            <img class="img-responsive" src="~/images/SeraphoftheEnd.jpg" style="height:130px;"/><p style="color:white; text-align:center">Seraph of the End</p>
        </a>

        <a href="#">
            <br />
            <img class="img-responsive" src="~/images/OnePunchMan.jpg" style="height:130px;"/><p style="color:white; text-align:center">One-Punch Man</p>
        </a>
    </div>
    <div style="display:flex; justify-content:space-evenly; background-color:#4C8C9E">
        <a href="#">
            <img class="img-responsive" src="~/images/AllYouNeedIsKill.jpg" style="height:130px;"/><p style="color:white; text-align:center">All You Need Is Kill</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="~/images/FullMetal.jpg" style="height:130px;"/><p style="color:white; text-align:center">Fullmetal Alchemist</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="~/images/VampireKnight.jpg" style="height:130px;"/><p style="color:white; text-align:center">Vampire Knight</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="~/images/RosarioVampire.jpg" style="height:130px;"/><p style="color:white; text-align:center">Rosario+Vampire</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="~/images/Gantz.jpg" style="height:130px;"/><p style="color:white; text-align:center">Gantz</p>
        </a>
    </div>

</div>

Answer 1

我也做了一个版本，着眼于响应。只有我将所有<a> 标签放在一个<div class="items"> 中。

[CSS]

    <style>
        .items {
            padding: 20px;
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(5, 2fr);
            background-color: #4C8C9E;
        }
    
        .items a {
            height: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    
        @media(max-width: 800px) {
            .items {
                grid-template-columns: repeat(2, 5fr);
            }
        }
    
        @media(max-width: 368px) {
            .items {
                grid-template-columns: repeat(1, 10fr);
            }
        }
    
    </style>

[HTML]

<div ng-controller="SliderController">
    <div class="items">
        
        <a href="#">
            <img class="img-responsive" src="/images/ShamanKing.jpg" style="height:130px;"/><p style="color:white; text-align:center">Shaman King</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/Limit.jpg" style="height:130px;"/><p style="color:white; text-align:center">Limit</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/DeathNote.jpg" style="height:130px;"/><p style="color:white; text-align:center">Death Note</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/SeraphoftheEnd.jpg" style="height:130px;"/><p style="color:white; text-align:center">Seraph of the End</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/OnePunchMan.png" style="height:130px;"/><p style="color:white; text-align:center">One-Punch Man</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/AllYouNeedIsKill.jpg" style="height:130px;"/><p style="color:white; text-align:center">All You Need Is Kill</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/FullMetal.jpg" style="height:130px;"/><p style="color:white; text-align:center">Fullmetal Alchemist</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/VampireKnight.jpg" style="height:130px;"/><p style="color:white; text-align:center">Vampire Knight</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/RosarioVampire.jpg" style="height:130px;"/><p style="color:white; text-align:center">Rosario+Vampire</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/Gantz.jpg" style="height:130px;"/><p style="color:white; text-align:center">Gantz</p>
        </a>
    </div>

</div>

全屏：

https://i.stack.imgur.com/7JwLb.jpg

宽度小于 800px：

https://i.stack.imgur.com/v9fpX.jpg

宽度小于 368px：

https://i.stack.imgur.com/690nO.jpg

Answer 2

为每个项目添加固定宽度.items a{width:130px;} 以指定列大小并看起来完美