图片和多行文本垂直居中

news/2024/10/22 14:50:37/

图片和多行文本垂直居中


代码:
<!DOCTYPE html>
<html lang="en"><head><meta name="keywords" content="zidingyi"><meta name="keywords" content="zidingyi"><meta charset="UTF-8"><title>hunsha 2</title><style>.sha {width: 520px;border: 1px solid red;/* line-height: 520px; */}h1 {text-align: center;font-size: 24px;/* border: 1px solid green; */}.sha .main {font-size: 0;border: 1px solid blue;}.sha .main img {width: 218px;vertical-align: middle;font-size: 0;border: 1px solid green;}.sha .main .content {display: inline-block;width: 290px;/* height: 400px; */font-size: 12px;border: 1px solid yellow;vertical-align: middle;text-indent: 2em;line-height: normal;}</style></head><body><div class="sha"><h1>婚 纱(hūn shā)</h1><div class="main"><img src="./img/hunsha.jpg" alt=""><div class="content"><div>每一个女人医生最钟爱的服装就是————婚纱,它象征爱情,见证了爱情的永恒。</div><div>当有天红颜老去,回顾岁月的流逝,一件合适自己的结婚的婚纱能够让所有的人记得那年的青春。每一个女人一生最钟爱的服装就是——婚纱,它象征了爱情,见证了爱情的永恒.</div><div>婚纱是一个女人一生的分水岭。穿上婚纱的那—刻就代表着一个女人少女时代的终结,您不再是小女孩而是一个新角色的开始。而穿上婚纱的女人对爱人、对将来的孩子、对整个家庭都有了责任。</div>    </div></div></div></body>
</html>

效果:

在这里插入图片描述

代码2:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>#ad {width: 700px;border: 1px solid rgb(231, 234, 237);}#ad h1 {text-align: center;}/*下面的具体内容*/#ad-content {height: 460px;line-height: 460px;/* border: 1px solid green; */font-size:0;text-align: center;}#ad .ad-pho {display: inline-block;width: 300px;height: 460px;/* border: 1px solid pink; */text-align: center;/* background-color:green; */}#ad .ad-pho img{vertical-align: middle;width: 300px;}#ad .ad-detail{display:inline-block;width:390px;/* border:1px solid green; */font-size:16px;line-height: normal;vertical-align: middle;text-align: left;padding-left: 10px;}#ad .ad-detail p{font-size:14px;color:#333;text-indent: 2em;/* border: 1px solid red; */}</style>
</head><body><div id="ad"><h1>幂 幂 蜜 语</h1><div id="ad-content"><div class="ad-pho"><img src="./exercise/img/杨幂.png" /></div><div class="ad-detail"><p>每一个女人一生最钟爱的服装就是——婚纱,它象征爱情,见证了爱情的永恒。</p><p>当有天红颜老去,回顾岁月的流逝,一件合适自己的结婚的婚纱能够让所有的人记得那年的青春。每一个女人一生最钟爱的服装就是——婚纱,它象征了爱情,见证了爱情的永恒。</p><p>婚纱是一个女人一生的分水岭。穿上婚纱的那一刻就代表着一个女人少女时代的终结,您不再是小女孩而是一个新角色的开始。而穿上婚纱的女人对爱人、对将来的孩子、对整个家庭都有了责任。</p></div></div></div>
</body></html>

显示:
在这里插入图片描述


http://www.ppmy.cn/news/856996.html

相关文章

Python数据处理 - 查看海量图片

目标检测模型在测试集上做推理的时候,有时会是几十万张的规模,这样就没办法用文件资源管理器打开,会卡死,只能用程序一张张打开查看效果。 import matplotlib.pyplot as plt # plt 用于显示图片 import matplotlib.image as mpimg # mpimg 用于读取图片 import numpy as np imp…

html做一张图片的分割动画,图片制作影视动画的出入点分割|图形视频处理软件 ae图层时间控制...

大家好&#xff0c;我是小编Aeolus 中文笔名和微信号‘烽火台上戏红颜’大家可以关注一下这个微信公众号每天都有不一样的教程。我们接着昨天的图形视频处理软件如何进行图层设置继续&#xff0c;今天我们来讲图片制作影视动画的出入点分割及图层的时间控制。这个也是一个很重要…

微信小程序webview页面下载图片

1.在html页面中引入微信JSSDK与html2canvas.js 文件下载位置&#xff1a; 微信JSSDK html2canvas.js <head runat"server"><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><script src"/utils/html2…

文字图片白底黑字_白底黑字简短文字图片 白底黑字纯简短文字

1、冰雪的灵魂&#xff0c;迷恋无价的约定&#xff0c;深深的爱。悲伤要喜悦&#xff0c;一片尘土&#xff0c;爱恨双方。 2、别笑&#xff0c;憨豆先生。让我为你哭泣。 3、我爱你&#xff0c;如果有一天我不爱你了&#xff0c;那一定是我离开了这个世界。《爱情维修站》 4、如…

ipa图片解密 php,iOS获取ipa素材、提取ipa资源图片文件

[导读]当我们看到一款优秀的App时&#xff0c;我们可能对它的一些素材比较感兴趣&#xff0c;或者我们也想仿写一款类似app&#xff0c;那么怎么能获取到它的素材资源文件呢&#xff1f; 当我们看到一款优秀的App时&#xff0c;我们可能对它的一些素材比较感兴趣&#xff0c;或…

MUI 图片预览

现在混合式APP日渐流行&#xff0c;MUI是其中的一个重要角色。 我们经常要遇到的图片预览&#xff0c;在MUI中是非常容易实现的。 首先&#xff1a; <script srcjs/jquery-1.10.1.js></script> <link rel"stylesheet" href"css/mui.min.css&…

独立图片服务器

独立图片服务器; 独立的必要性 分担Web服务器的I/O负载-将耗费资源的图片服务分离出来,提高服务器的性能和稳定性; 能够专门对图片服务器进行优化-为图片服务设置有针对的缓存方案,减少宽带成本,提高访问速度;(例如把硬盘的转速加高,读写会快一些,图片不需要过多的运算,cup可…

这3个方法教你录音转文字怎么导出来

在日常生活中&#xff0c;我们有时候可能需要将音频转换为文本&#xff0c;因为这样可以节省我们听的时间&#xff0c;还能让记录更加清楚明了。那么&#xff0c;你是否知道录音转文字怎么导出来&#xff1f;如果你不懂&#xff0c;请接着看我下面介绍的三种方法吧&#xff01;…