使用的代码

Question

我正在开发一个网站，我要展示这样的内容：

enter image description here

我目前的HTML代码是：

<body>
    <div id="about">
        <img src="images/aboutCardIcon.png"/>
        <span>About</span>
    </div>
</body>

这个HTML代码是否正确？我可以使用span标签吗？

如何在中间关注文本？

Answer 1

我会使用<figure>和<figcaption>元素，这些元素非常适合您正在尝试的内容（html5）。

<强> Here's an example

使用的代码

HTML

<figure>
    <img src="image.jpg" alt="Potato">
    <figcaption>A Potato</figcaption>
</figure>

CSS

figure {
    border:     1px solid black;
    display:    inline-block;
    text-align: center;
    padding:    20px;
}

figure img {
    float:  left;
    height: 126px;
}

figcaption {
    float:       right;
    height:      126px;
    line-height: 126px;
    margin-left: 50px;
    font-family: Arial, sans-serif;
    font-size:   300%;
}

大多数CSS纯粹是装饰性的，重要的部分是图像上的浮动位置和<figcaption>，以及<figcaption>上的设置高度和行高。

P.S。我之所以把它变成白色而不是黑色的原因是因为我选择的图像有黑色背景，我不希望它看起来很可怕。：）

使用图像将div中的文本居中

1 个答案:

使用的代码

HTML

CSS