导航:首页 > 文字图片 > 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文字在图片下方相关的资料

热点内容
令对方看了心疼的文字控图片 浏览:481
微信如何永久删除图片 浏览:534
衣服名称图片 浏览:243
华为手机如何将图片转成文件 浏览:244
word纯图片排版布局 浏览:467
女生拿剑图片古风动漫 浏览:281
非诚勿扰文字动态图片 浏览:340
如何分辨黑眼圈图片 浏览:230
动漫女孩子笑着哭泣的图片 浏览:481
最小的汽车图片价格 浏览:186
画图片简单 浏览:267
微信图片喝酒文字图片 浏览:386
162男生图片 浏览:52
短发侧颜动漫女孩图片 浏览:920
word文档优美背景图片 浏览:471
dw图片怎么插入表格 浏览:16
tfboys专属背景文字图片 浏览:31
高个子女生穿长裙图片 浏览:116
紫发小女孩动漫图片 浏览:329
女孩死图片 浏览:725