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

html-css019

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

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

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

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

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

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

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

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

1. 如何在图片上加文字

如何在图片上加文字 如何在图片上加入文字?

方法如下: 1、把需要添加字的图片先移到桌面,鼠标右键点击图片,看到“编辑”后打开编辑。

2、然后在“画图”中编辑,点击框中“A”的标志,这种标志一般都是编辑字体。 3、选择一种“字体”、“字体大小”、“加粗”之类的都可以自行设置,然后点击图片,左键拉出一个区域。

4、在这个“区域”中编辑字,如果字比较多,还可以把框拉的更长,这里打了“山清水秀”的文字。 5、鼠标点击图中任意地方,刚才的框就消失了,只留下打过的字,最后点击保存图片就可以了。

扩展资料: 图片处理,即对图片进行处理、修改。通常是通过图片处理软件,对图片进行调色、抠图、合成、明暗修改、彩度和色度的修改、添加特殊效果、编辑、修复等等。

与图片处理类似的概念是图像处理,对图像进行分析、加工、和处理,使其满足视觉、心理以及其他要求的技术。 图像处理是信号处理在图像域上的一个应用。

目前大多数的图像是以数字形式存储,因而图像处理很多情况下指数字图像处理。此外,基于光学理论的处理方法依然占有重要的地位。