Question

我正在尝试使用HTML / CSS在3行图像下对齐文本。如我删除我的评论后立即对齐所有内容。

<div class="inline">     
        <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
        <!-- <p> This is a test</p> -->         
        <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
        <!-- <p> This is a test</p> -->         
        <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
        <!-- <p> This is a test</p> -->      
    </div>

请参阅我的示例https://jsfiddle.net/gvrr25bk/1/

提前致谢！

伊万

Answer 1

您可以将每个img与p一起包裹在div内，然后将display:inline-block添加到div

.inline {
    text-align: center;
}
.wrap {
    display: inline-block;
    margin: 0 2%;
}

<div class="inline">     
            <div class="wrap">
            <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
            <p> This is a test</p>        
            </div>
             <div class="wrap">
            <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
            <p> This is a test</p>    
            </div>
             <div class="wrap">
            <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
            <p> This is a test</p>  
             </div>
 </div>

点击此处CSS align和此处CSS inline-block或一般性地了解css CSS w3schools

关于HTML块和内联元素，请参阅此处HTML Block and Inline Elements

我给你的解决方案的想法是，如果你想让图像与它的文本保持在一起，你应该将它们分别放在同一个容器中。通过这种方式，他们将永远保持在一起。

尝试使用HTML / CSS在内嵌图像下对齐文本

1 个答案: