html - 使链接中的文本完全适合图像下方

Question

我希望图片下方的文字恰好位于图片下方。较长的文本继续在同一行中，这不是我想要的。我希望它转到下一行并停留在相应图像的下方。我也尝试过使用 break-word 和对齐 center 但它不起作用。

.row div {
    display: inline-block;
    padding-left: 5%;
    padding-right: 5%;
}
.row div img {
    max-width: 100%;
    max-height: 100%;
}
.row div a {
    word-wrap: break-word;
    text-align: center;
}

<div class="row">
    <div>
        <a href="#">
        <img src="martial.png">
        </br>Manchester United 2015-16 Martial kit
        </a>
    </div>
    <div>
        <a href="#">
        <img src="ars.png">
        </a>
    </div>
    <div>
        <a href="#">
        <img src="bvb.png">
        </a>
    </div>
    <div>
        <a href="#">
        <img src="lewandowski1.png">
        </a>
    </div>
</div>

Answer 1

您必须为每个图像和链接添加额外的 div 容器。

请看下面的例子:

.row div{
    display: inline-block;
    padding-left: 5%;
    padding-right: 5%;
}
.row div img{
   max-width: 100%;
   max-height: 100%;
}
.row div a{
   word-wrap:break-word;
   text-align:center;
}
.img-container{
     display: inline-block;    /* added */
     float: left;            /* added */
     text-align: center;    /* added */
}

<div class="row">
            <div class="img-container">
                <a href="#"><img src="http://i3.mirror.co.uk/incoming/article6363634.ece/ALTERNATES/s615b/Anthony-Martial-signs-for-Manchester-United.jpg"></br>Manchester United 2015-16 Martial kit text aded text aded text aded text aded text aded</a>
            </div>
            <div class="img-container">
                <a href="#"><img src="ars.png"></a>
            </div>
            <div class="img-container">
                <a href="#"><img src="bvb.png"></a>
            </div>
            <div class="img-container">
                <a href="#"><img src="lewandowski1.png"></a>
            </div>
</div>

如果你想设置预定义的宽度和高度，你可以在 .img-container 类中添加规则。其他方式将采用图像尺寸。对于居中链接，只需将此规则添加到 .img-container 类:文本对齐:居中；