Html Figcaption未在图像下正确对齐

我试着在同一条线上一张接一张地布置3张图片，每一张都有自己的“Figcaption”。但下图所示的figcaption完全没有居中，图形区域也没有与图像正确对齐。我需要这个图形占据与图像完全相同的空间，否则它会将其他图像推到下一行，这是我不希望发生的。因此，基本上，当我将文本设置为居中对齐时，为图形设置特定的131px大小，然后使figcaption与图像精确对齐的最佳方法是什么

问题的形象- （图形与图像完全不对齐）

HTML:

---

它是

img

上设置的

左侧填充。尝试更改：

#bestsellerimages img{
    padding: 0 1em 0 1em;
}

致：

在你的CSS中。
对。图形本身只有131像素宽，但是图像加上填充是131像素，所以它溢出了图形。盒子模型再次出现。
html, body { /* ### */
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    background-color: #fdfdfd;
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
    width: 100%;
    height: 100%;
    margin:0 0 0 20%; /* ### */
}
#sidebar {
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}
#nav {
    color: #DADADA;
    display: block;
    max-width: 100%;
}
#nav ul {
    padding-left: 0;
}
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0.75em 0 0.75em 0;
    text-align: center;
    max-width: 100%;
}
#nav li:hover {
    background:#333;
}
#nav li a {
    display: block;
    padding: 0.5em 0;
}
.link {
    text-align: right;
    margin-right: 25%;
    letter-spacing: 1px;
}
#welcometext {
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 2em;
}
#searchbar {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1em 0.5em 1em;
    text-align: right;
}
#searchbar input {
    max-width: 95%;
}
#sectionone {
    /*position: fixed;*/
    top: 0;
    right: 0;
    width: 80%;
}
#containerone {
    margin-top: 0;
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-bottom: 2px solid #DADADA;
    box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
    margin: 6em 0 6em 0;
}
#logo h1 {
    color: #ed786a;
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 13px;
}
#logo p {
    margin-top: -0.6em;
    color: #888888;
    letter-spacing: 4px;
    font-size: 0.85em;
}
#sectiontwo {
    width: 80%;
    top: 0;
    right: 0;
}
#containertwo {
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
#sectwohead{
    margin: 2em 0 2em 0;
    color: #888888;
}
#bestsellerimages{
    float: left;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 2em 0;
}
#bestsellerimages img{
    padding: 0 1em 0 1em;
}
#bestsellerimages figure{
    display: inline-block;
    width: 131px;
}

#bestsellerimages img{
    padding: 0 1em 0 1em;
}

#bestsellerimages img{
    padding: 0;
}