gpt4 book ai didi

html - 将带有图像的 div 中的文本居中

转载 作者:太空宇宙 更新时间:2023-11-04 16:05:19 25 4
gpt4 key购买 nike

我正在开发一个网站,我要展示这样的东西:

enter image description here

我当前的 html 代码是这样的:

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

这段 html 代码是否正确?我可以使用 span 标签吗?

关于文本如何居中?

最佳答案

我会使用 <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 纯粹是装饰性的,重要的部分是图像上的 float 位置和 <figcaption> , 以及 <figcaption> 上的设置高度和行高.

附言我之所以像你的例子那样把它变成白色而不是黑色,是因为我选择的图像有黑色背景,我不想让它看起来很丑。 :)

关于html - 将带有图像的 div 中的文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9239498/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com