Question

详细说明一些事情。我喜欢打字码的新品牌（大约一个半星期左右，但仍然没有太多）我的问题是我想弄清楚如何在我的缩略图下方设置文字，如下图所示（仅此代码不会让它看起来正确但我认为这是一个非常容易回答的愚蠢问题。我需要在每个缩略图下设置一个名称，并且我已经在这里了，因为这并不是复制和粘贴代码的东西我是这样的。在过去的一周里我已经筋疲力尽了，这件事给了我很大的问题 - 到目前为止，我已经离开了引导页面将所有这些放在一起但是我的答案还没有到来我还以为我问过任何想法？

    <div class="row">

        <div class="top-listings">

            <div class="col-md-3">
                <a href="http://http://www.mp4upload.com/knx8txszxvhc">
                    <img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
                </a>
            </div>

            <div class="col-md-3">
                <a href="http://http://www.mp4upload.com/knx8txszxvhc">
                    <img width="80%" style="max-height:10%" src="http://1.bp.blogspot.com/-sAGd2pCpHgM/Tjr3vGeuPcI/AAAAAAAAAAU/llCHgjsh7Uc/s320/the+law+of+ueki.JPG" alt="Naruto Shippudden" />
                </a>
            </div>

            <div class="col-md-3">
                <a href="http://http://www.mp4upload.com/knx8txszxvhc">
                    <img width="80%" style="max-height:10%" src="http://img2.wikia.nocookie.net/__cb20140529203802/voiceacting/images/7/7c/Berserk_1997_DVD_Cover.jpg" alt="Naruto Shippudden" />
                </a>
            </div>

            <div class="col-md-3">
                <a href="http://http://www.mp4upload.com/knx8txszxvhc">
                    <img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
                </a>
            </div>

            <div class="col-md-3">
                <a href="http://http://www.mp4upload.com/knx8txszxvhc">
                    <img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
                </a>
            </div>

            <div class="col-md-3">
                <a href="http://http://www.mp4upload.com/knx8txszxvhc">
                    <img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
                </a>
            </div>

            <div class="col-md-3">
                <a href="http://http://www.mp4upload.com/knx8txszxvhc">
                    <img width="80%" style="max-height:100%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
                </a>
            </div>

            <div class="col-md-3">
                <a href="http://http://www.mp4upload.com/knx8txszxvhc">
                    <img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
                </a>
            </div>
        </div>


</div><!-- /.container -->

    <div class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="text-center">
                        <a href="#">
                            <img src="http://s3-media3.fl.yelpcdn.com/bphoto/yhFlDqlSi6BE8L7eU1P8OA/ls.jpg" width="35" height="35" alt="google"  />
                            Copyright &copy; 2015. Powered by Zewa Design. All Rights Reserved.
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

直接在每个<img>标记之后或在col-md-3 DIV的结束DIV标记之前插入带有文字的新DIV标记，例如

<div class="my_text">text 1 2 3</div>

并在样式表中为.my_text添加所需的CSS规则，例如font-size，color，text-align: center;等。

Answer 2

以最简单的形式，你可以做到这一点（这是你的第一张照片）：

<div class="col-md-3">
    <div>
       <a href="http://http://www.mp4upload.com/knx8txszxvhc">
        <img width="80%" style="max-height:10%" src="http://vignette2.wikia.nocookie.net/onepunchman/images/c/c9/One_Punch_Man_TV_Anime_Key_Visual.jpg/revision/latest?cb=20150311173301.jpg" alt="Naruto Shippudden" />
        </a>
     </div>
     <div>
         <span>Image Name Comes here</span>  
     </div>

您还可以按自己喜欢的方式设计样式。

好的，我试图弄清楚如何将文本添加到缩略图（我是一个完整的新手代码）

2 个答案: