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

发布网友发布时间：2022-03-09 02:44

我来回答

共11个回答

热心网友时间：2022-03-09 04:14

<!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>

热心网友时间：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

热心网友时间：2022-03-09 16:12

分别让文字和图片在其父级元素中居中，即设置固定宽度，然后margin:0 auto;

热心网友时间：2022-03-09 19:10

感觉你最好是用三个元素来完成，父元素内有一个img和一个p，剩下的你微调就好了

热心网友时间：2022-03-09 22:24

代码如下：

需要显示的文字

</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

能描述得具体一点吗？上面一张图，下面一行是文字居中吗？

首页

文章

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