css文字在图片下方_html css怎么样才能把文字放在图片的正下方

‘壹’ html css怎么样才能把文字放在图片的正下方

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.d1{

width: 400px;

height: 250px;

background-color: red;

text-align: center;

}

</style>

</head>

<body>

<div>

<br/>

你啥时候嫁给我,hahahahaahahahahahaah

</div>

</body>

</html>

————————————————

这样就会能够将文字放在图片的正下方，得到以下图片：

文字位于正右边的方法：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.d1{

width: 400px;

height: 250px;

background-color: red;

}

.d2{

vertical-align: middle;

}

</style>

</head>

<body>

<div>

你啥时候嫁给我

</div>

</body>

</html>

‘贰’ CSS样式：如何使文字显示在图片下方

图片默认为内联元素，可以设置图片为块级元素，然后直接写文字就可以在图片下方了。

举例：

img{display:block;}

HTML代码：

<imgsrc="图片路径"/>这里是测试文字，可以在图片下方。

‘叁’ css<strong>里文字固定在图片下面

看完你的代码我建议啊，你li里面只包含一个<a>标签，即<a>包含图片和底下的文字，因为都是一个连接，然后img在css里面这么写

img {
display:block;

width:你定义

height:你定义

margin:5px auto; //即图片离顶部5px,然后水平居中

}
接着你的strong外面有个p标签，就不用span标签了,p在css里面这么写
p{
width:100%;

text-align:center;

}
我大概写了一下，楼主看的懂的话自己完善一下，就没问题了，还有楼主要做的网页容有点给力

‘肆’ CSS怎样控制，让文字在图片下方显示

图片默认为内联元素，可以设置图片为块级元素，然后直接写文字就可以在图片下方了。

‘伍’ 如何用CSS，将文字隐藏在图片之下，然后将鼠标移到图片上就会浮现出来，下面是图片显示的案例，在线等

<style>
.box{position:relative;float:left;width:240px;height:160px;margin:10px}
.box.img{width:100%;height:100%;background-color:#fdd}
.box.txt{display:none;position:absolute;top:160px;width:320px;height:200px;background-color:#ddf;z-index:2}
.box:hover.txt{display:block}
</style>
<divclass="box">
<divclass="img">这里放图片</div>
<divclass="txt">这里放文字</div>
</div>
<divclass="box">
<divclass="img">这里放图片</div>
<divclass="txt">这里放文字</div>
</div>
<divclass="box">
<divclass="img">这里放图片</div>
<divclass="txt">这里放文字</div>
</div>
<divclass="box">
<divclass="img">这里放图片</div>
<divclass="txt">这里放文字</div>
</div>
<divclass="box">
<divclass="img">这里放图片</div>
<divclass="txt">这里放文字</div>
</div>
<divclass="box">
<divclass="img">这里放图片</div>
<divclass="txt">这里放文字</div>
</div>
<divclass="box">
<divclass="img">这里放图片</div>
<divclass="txt">这里放文字</div>
</div>
<divclass="box">
<divclass="img">这里放图片</div>
<divclass="txt">这里放文字</div>
</div>

‘陆’ 用css实现图标在上，文字在下

很多种实现方式.
1.
设置两个div层(也可以是table)
上层div
放图片.
下层放文字.
2.
嵌套div.
外层背景图片.
内层文字(
span
也可以)
3.
一层div,
设置背景图片.
文字写在div里.
但是对<a>标签进行
line-height
值设置高些.
就能让文字位于水平线下方了.

‘柒’ 如何编写CSS将文字显示在图片下方

1、比如我在div里面书写了一些文字，然后想要在放入一张图片，这时候小伙伴可能会直接想到img标签，其实这个想法是错误的。

‘捌’ CSS让一行文字显示在全局图片的底部。。

直接上代码：
<td align="center">
<div style="position:relative;height:450px;width:300px;">
<a href="#" target="_blank"><img src="图片1.jpg" style="border:0;height:450px;width:300px;float:none;margin:0px;"/></a>
<div style="opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);position:absolute;width:300px;height:50px;line-height:50px;z-indent:2;left:0;bottom:4;background:#000;color:#FFF;">
文字
</div>
</div>
</td>
<td align="center">
<div style="position:relative;height:450px;width:300px;">
<a href="#" target="_blank"><img src="图片2.jpg" style="border:0;height:450px;width:300px;float:none;margin:0px;"/></a>
<div style="opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);position:absolute;width:300px;height:50px;line-height:50px;z-indent:2;left:0;bottom:4;background:#000;color:#FFF;">
文字
</div>
</div>
</td>

要是想修改文字和底部的距离修改bottom的值就行了。

辛苦码字，如果问题解决了，别忘了给分哦。

‘玖’ css页面布局如何使文字在图片下方居中显示

摘要您好，您的问题我已经看到了，我来为您解答。请稍等几分钟奥～

导航:首页 > 文字图片 > css文字在图片下方

css文字在图片下方

与css文字在图片下方相关的资料