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

html文字在图片下方

发布时间:2022-11-27 08:38:32

A. html如何将文本显示在图片下方

图片下面加<p>标签即可,<img src="裤子.jpg"></a><p>XXX</p>

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

使用绝对定位position: absolute;让文字覆盖在图片上

<style>
.h-poti{position:relative;display:block;}
.h-potiem{position:absolute;bottom:10px;left:0;width:100%;text-align:center;}
</stle>
<spanclass="h-pot">
<i><imgsrc="img/b1-img.jpg"/><em>文字</em></i>
</span>

C. HTML中,怎么在图片的下面加入文字啊

使用定位来写的,首先一个大盒子装着图片,

然后一个盒子装着头像和文字,把装着头像和文字

的盒子根据装着图片的盒子进行定位就可以了,

像这样的其实很简单的,要多思考和分析

代码,要注意图片你要自己放图片,和修改图片路径

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>图片上放文字</title>

<style type="text/css">

html,body{

margin:0;

}

.auto-img{

display: block;

width:100%;

}

.box{

width:100%;

margin-top: 50px;

}

.box-cent{

width:50%;

margin:0 auto;

position: relative;

}

.texbox{

position: absolute;

width:50%;

line-height: 80px;

background-color: #0f0;

text-align: center;

top:50%;

left:50%;

transform: translate(-50%, -50%);

}

</style>

</head>

<body>

<div class="box">

<div class="box-cent">

<img class="auto-img" src="images/000.jpg"/>

<div class="texbox">我是用来装头像和文字的盒子</div>

</div>

</div>

</body>

</html>

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

代码如下:

<div class="box">

<img src="6107.jpg">

需要显示的文字

</div>

<style>

.box{width:300px; text-align:center; font-szie:18px;}

.box img {width:100%;}

</style>

E. html中怎么让输入的文字显示在图片的下方

个人推荐你用个table,这样控制性强一些
详解:
<table>
<tr><!--这里是一行-->
<td>
<img src="http://www..com/img/_logo.gif"/>
</td>
</tr>
<tr><!--这里是下一行-->
<td>
这里的文字在下方
</td>
</tr>
</table>
不懂html语言的话 可以再次留言

F. html怎么让文字和图片并排

同一个div中的图片和文字一起左右居中的话div中的图片设置display:block;margin:auto;然后给div设置text-align:center就好,记得给div设置宽度。想要垂直也居中就不给div设置高度,设置相等padding-top和padding-bottom就行

G. 我用记事本编辑HTML,怎样把文字置于图片正下方

<divstyle="text-align:center;">
<imgsrc="图片地址/图片名称.jpg">
<p>你要输入的文字</p>
</div>

如果图片和文字在同个div内,那就把div的css设置为text-align: center;

H. html在盒子内将文字放在图片下方

比较简单的做法就是,将他们放置一个盒子内,你想让文字跟图片居中,那么不一定要让图片当文字的参照物,而是让他们在大盒子内居中,不需要太复杂的框架结构,只需要利用样式的属性即可,并且各个浏览器都会正常显示,代码如下:
<div class="box">
<img src="6107.jpg">
这里是居中的文字
</div>
<style>
.box{width:300px; text-align:center; font-szie:18px;}
.box img {width:100%;}
</style>

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

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

J. HTML如何在图片下面打出文字

图片一个div文字一个div。或者图片和文字在一个div里,把图片的宽设置成100%。或者在图片后面加<br />标签。

阅读全文

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

热点内容
word全选图片后图片格式消失 浏览:803
中年男发型图片 浏览:980
半短发烫发发型图片 浏览:966
男生用手臂揽住女生的肩膀图片 浏览:457
微信怎么发图片加文字 浏览:745
女孩子的漫画图片大全 浏览:318
男生眼睛图片大全可爱 浏览:421
动漫山地车图片 浏览:835
鱼简单图片简笔画大全图片大全 浏览:152
小孩秋天衣服图片 浏览:327
表盘壁纸高清图片大全炫酷 浏览:29
高清可爱图片无水印 浏览:913
阳光男生站立图片 浏览:497
遇到一个有好感的人文字图片 浏览:755
拖布池图片和价格 浏览:409
男儿童可爱简笔画大全图片 浏览:775
word中的文字和图片如何并成一页 浏览:692
思维导图图片简单漂亮 浏览:647
如何将cr3图片转换为jpeg 浏览:224
超短发戴眼镜女生图片 浏览:520