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

html-css011

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>

想要让文字在底部，需要用到 position:fixed

bottom:0px

left:0px

想要让文字居中，需要用到 text-align:center

示例的截图

示例的代码

<!doctype

html>

<html>

<head>

<meta

charset="utf-8">

<title>文字底部居中</title>

<style>

*{margin:0px

padding:0px}

/*这行是为了清除代码默认的样式，不用拷贝*/

.botCenter{width:100%

height:35px

line-height:35px

background:#ccc

position:fixed

bottom:0px

left:0px

font-size:14px

color:#000

text-align:center}

</style>

</head>

<body>

<div

class="botCenter">就是一个在底部显示的文字</div>

</body>

</html>