将div内的文字和图片居中

Question

I'm developing a web site and I to show something like this: 我正在开发一个网站，并展示如下内容：

在此处输入图片说明

My current html code is this: 我当前的html代码是这样的：

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

Is this html code correct? 这个HTML代码正确吗？ Can I use span tag? 我可以使用跨度标签吗？

How can I center in the middle About text? 如何在“关于文本”中间居中？

Answer 1

I would use the <figure> and <figcaption> elements which are perfect for what you're trying (html5). 我会使用<figure>和<figcaption>元素，这些元素非常适合您尝试的内容（html5）。

Here's an example 这是一个例子

The code used 使用的代码

HTML 的HTML

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

CSS 的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%;
}

Most of the CSS is purely cosmetic, the important parts are the floats places on the image and the <figcaption> , and the set height and line-height on the <figcaption> . 大部分的CSS的纯粹是化妆品中，重要的部分是在图像上的漂浮位置和<figcaption>和设定高度和行高的<figcaption>

PS the reason I made it white and not black like your example, is because the image I chose had a black background, and I didn't want it to look hideous. PS我之所以将其设置为白色而不是黑色的原因是因为我选择的图像具有黑色背景，并且我不希望它看起来很丑。 :) :)

将div内的文字和图片居中

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-02-11 10:33:51

The code used 使用的代码

HTML 的HTML

CSS 的CSS

将div内的文字和图片居中

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-02-11 10:33:51

The code used 使用的代码

HTML 的HTML

CSS 的CSS

解决方案1
1 已采纳 2012-02-11 10:33:51