Html Can'；t将标签与列表中我的图像下方对齐

我正在尝试对齐图像下方的文本/锚定标记，但我无法做到这一点，我尝试了

display:block

/*汽车展示*/
.汽车展示{
边际：0px；
填充：0px；
}
.汽车展示{
列表样式类型：无；
文本对齐：居中；
}
.李国宝{
显示：内联；
}
.汽车陈列室{
颜色：白色；
背景色：#ae9595；
文字装饰：无；
填充：0.1%3%；
过渡：0.5s；
}
.汽车展示厅ul li a：悬停{
颜色：rgba（255、255、255、0.719）；
边框：实心1px黑色；
}
.车型{
宽度：25%；
}









像那样吗


/*汽车展示*/
.汽车展示{
边际：0px；
填充：0px；
}
.汽车展示{
列表样式类型：无；
文本对齐：居中；
}
.李国宝{
显示：内联块；
}
.汽车陈列室{
颜色：白色；
背景色：#ae9595；
文字装饰：无；
填充：0.1%3%；
过渡：0.5s；
}
.汽车展示厅ul li a：悬停{
颜色：rgba（255、255、255、0.719）；
边框：实心1px黑色；
}















使用以下方法：

.car-showcase ul li {
    display:grid;
}

正确对齐锚点时，锚点有点棘手，请尝试在锚点中放置一个段落标记，并将段落锚点的宽度设置为100%
如果将列表向左浮动，并添加display:block链接，则该锚点将起作用。这也将在每个链接之间添加一点空间，链接将是图像的宽度

    .car-showcase ul li {
        float:left; 
        margin-right:10px;
    }
    
    .car-showcase ul li a {
        color: white;
        background-color: #ae9595;
        text-decoration: none;
        padding: 0.1% 3%;
        transition: 0.5s;
        display:block;
    }

见：

我改变了：

.car-showcase ul li {
    display: inline-block; // was inline
}

我将
a
标记包装在
元素中。
这是可行的，但是我必须将宽度设置为%并替换为设置为像素。这会影响响应吗？是的，我已将其删除到，但您可以更改容器的宽度。试着测试：）你在写答案之前测试过吗？@ShivangSharma试着解释一下答案中的代码。提供的答案被标记为低质量帖子，以供审查。以下是一些指导原则。这一答案可以从解释中获益。仅代码答案不被视为“好”答案。从…起