Question

我正在尝试学习CSS和HTML，这里有一个非常基本的问题。如何编写我的CSS以便它在图像下方的跨度中显示文本

<div class="section">
    <ul>
        <li id="lumia820" class="figures" >
            <img src="f-lumia820.jpg" alt="" class="figure"/>
            <span class="figcaption">Lumia 820</span>
        </li>
        <li id="iphone4s" class="figures">
            <img src="f-iphone4s.jpg" alt="" class="figure"/>
            <span class="figcaption">Iphone 4s</span>
        </li>
    </ul>
</div>

目前，我有类似

的内容

.section ul {
    margin: 0 auto;
    float: left;
}

.figures {
    display: inline;
}

.figures span {
    font-size: 20px;
    font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
    letter-spacing: 0.1em;
}

.figures img{
    vertical-align: top;
    width: 30%;
    height: 30%;
    margin: 1% 1%;
}

Answer 1

只需设置为display: block;，以便每个人都占用自己的行。现在，它们设置为display: inline，因为这是<img>代码和<span>代码的默认设置。

.figures span, .figures img {
    display: block;
}

Answer 2

应该能够做到

.figcaption {
   display:block;
}

fiddle

Answer 3

这应该可以解决问题：

.figures span{ display: block; }

Answer 4

检查此演示：http://jsfiddle.net/h6McP/1/

跨度和图像实际上是一个内联元素，因此它将逐行进行我们需要制作阻止元素，以便跨度将在图像

之下

这里我给了

.figures span {display:block}

li.figures { display: inline-block;}

检查这是更新的

如何使用CSS将文本（跨度）放在图像下方

4 个答案: