html css怎么样才能把文字放在图片的正下方
发布网友
发布时间：2022-03-09 02:44
共11个回答
热心网友
时间：2022-03-09 04:14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px;
height: 250px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
<br/>
你啥时候嫁给我,hahahahaahahahahahaah
</div>
</body>
</html>
————————————————
这样就会能够将文字放在图片的正下方，得到以下图片：
文字位于正右边的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px;
height: 250px;
background-color: red;
}
.d2{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
你啥时候嫁给我
</div>
</body>
</html>
热心网友
时间：2022-03-09 05:32
1、首先新建一个html文件，命名为test.html，在test.html文件内，在div内，使用img标签创建一张图片，使用p标签创建两个文字。
2、然后在test.html文件内，设置div的class属性为mydiv。
3、接着在css标签内，通过class设置div的样式，定义它的宽度为280px，高度为200px，位置属性为相对定位(relative)。
4、在css标签内，再定义p标签的样式，设置它的位置属性为绝对定位(absolute)，同时，使用bottom属性设置距离底部为0px，使用right属性设置距离右边为0px。
5、最后在浏览器打开test.html文件，查看实现的效果。
热心网友
时间：2022-03-09 07:06
比较简单的做法就是，将他们放置一个盒子内，你想让文字跟图片居中，那么不一定要让图片当文字的参照物，而是让他们在大盒子内居中，不需要太复杂的框架结构，只需要利用样式的属性即可，并且各个浏览器都会正常显示，代码如下：
<div class="box"><img src="6107.jpg">
这里是居中的文字
</div>
<style>
.box{width:300px; text-align:center; font-szie:18px;}
.box img {width:100%;}
</style>
显示出来的页面如下图：
热心网友
时间：2022-03-09 08:58
。。。两块钱解决你的问题。以后提问请带上你图片或者代码说明，要不然就把问题详细描写清楚。如果没错的话你是出现文字在图片右侧的情况，但你希望它被挤到下边去的问题。有多种解决方法，最简单的一种就是在文字和图片外部用一个 div 将两者嵌套进去，然后再将 div 的宽度设置和图片一样宽（最好还是多 2px 吧），然后字就自动被挤下去了。
热心网友
时间：2022-03-09 11:06
光css是不行的，你可以这样来设置
<li><img src="图片地址"><p>文字</p></li>
用css控制li标签的高度宽度；一般图片的宽度就可以； 这样就可以实现了，如果觉得不太美观，再控制一下p标签以及图片的样式；
热心网友
时间：2022-03-09 13:30
<style type="text/css">
.tp{
width:xx;
height:xx;
margin:o auto;
text-align:center;
background:url(图片路径)no-repeat center 0；
padding-top:xx； 图片的宽、高及内边距自己去调试，大概代码就是这样了
}
</style>
<div class="tp">
点击咨询
</div>
热心网友
时间：2022-03-09 16:12
分别让文字和图片在其父级元素中居中，即设置固定宽度，然后margin:0 auto;
热心网友
时间：2022-03-09 19:10
感觉你最好是用三个元素来完成，父元素内有一个img和一个p，剩下的你微调就好了
热心网友
时间：2022-03-09 22:24
代码如下：
<div class="box">
<img src="6107.jpg">
需要显示的文字
</div>
<style>
.box{width:300px; text-align:center; font-szie:18px;}
.box img {width:100%;}
</style>
热心网友
时间：2022-03-10 01:56
怎么样做才能把文字放在图片外面
热心网友
时间：2022-03-10 05:44
能描述得具体一点吗？上面一张图，下面一行是文字居中吗？
