移动端图片文字垂直居中实现方法

最近在开发微信公众号的时候遇到图片与文字居中的问题。例如我们要实现类似以下这样效果:

或者

 在开发过程中, 可能我本身代码原因或者兼容原因,在ios和安卓端很难完全实现这样的居中效果。

 为了实现这样的写法,同时兼容ios与安卓端,我采用了以下三种方法来实现(以下代码我只写主要的属性,具体样式大家各自根据自己需求添加):

一、display:table和display:table-cell使用;

例如: 

1 <div style="display:table;vertical-align: middle;"> 
2    <span class="display:table-cell;vertical-align:middle"><img src="/Images/user/shoujinotice.png" width="12" height="12" alt=""></span>
4     <span class="display:table-cell;vertical-align:middle">文字</span> 
5 </div>

通过这样的CSS样式组合实现。

二、利用背景实现;

例如:

<style>

  div{background: url(/Images/shop/cpbh.png) no-repeat left;

  1. background-size: 14px;
  2. display: inline-block;
  3. padding-left: 20px;
  4. color: #222;
  5. }

</style>

<div>文字</div>

通过背景引用图片,然后利用padding-left属性,让文字不遮挡图片;如果遇到图片偏离,我们还可以利用background-position属性来调整图片位置。

三、利用定位来解决。

<style>

  div{

  position:relative;

      padding-left: 20px;

}

    div img{

  position:absolute;

  top:0;

    left:4px

}

</style>


<div style="position:relative">   <img src="/Images/user/shoujinotice.png" width="12" height="12" alt="">
  文字 </div>
利用定位把照片固定住,padding-left让文字不遮住照片实现。

PS:以上CSS样式只写关键属性,具体样式根据不同需求自行调整。
本人只列举三种方法如果有何疑问或者本人写错之类的,欢迎大家指点讨论!






转载于:https://www.cnblogs.com/christong/p/6910250.html

<think>好的,用户之前让我介绍过静态购物网页的代码,现在他们又询问如何制作一个有图片文字的简单网页。我需要先理解他们的具体需求。 用户可能刚开始学习网页开发,想从基础开始。他们之前接触过购物网页的代码,现在想更基础的内容,比如如何将图片文字结合起来。这可能是一个学生或者刚入门的新手,需要简单明了的示例。 用户的需求是创建一个包含图片文字的简单网页,可能用于个人项目、作业或者展示。他们可能希望了解HTMLCSS的基本结构,如何布局元素,以及如何让图片文字协调显示。 需要确保提供的代码示例足够简单,同时结构清晰,方便用户理解。应该包括基本的HTML结构、图片插入方法文字排版以及简单的CSS样式。此外,可能需要解释每个部分的作用,帮助用户逐步构建。 还要考虑用户可能对响应式设计或布局有疑问,比如如何让图片文字并排显示,如何调整大小等。因此,示例中可以包含Flexbox布局,这是一种常用的现代布局方法,适合新手学习。 另外,需要提醒用户注意图片路径的问题,确保他们知道如何正确引用本地或网络图片。可能还需要给出一些注意事项,比如图片格式、文字排版的最佳实践,以及如何进一步美化网页的建议。 最后,检查代码是否正确,语法是否准确,特别是用户之前提到过LaTeX的格式要求,但在这次的问题中主要是HTML/CSS,所以确保代码部分正确无误,注释清晰,方便用户复制修改。</think>以下是一个包含图片文字的简单网页实现示例,带有详细注释说明: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>图文展示示例</title> <style> /* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 页面主体样式 */ body { font-family: '微软雅黑', sans-serif; line-height: 1.6; max-width: 1200px; margin: 20px auto; padding: 0 20px; } /* 图文容器 */ .content-block { display: flex; /* 使用弹性布局 */ gap: 30px; /* 元素间距 */ margin: 40px 0; align-items: center; /* 垂直居中 */ } /* 图片样式 */ .content-img { width: 400px; /* 固定宽度 */ height: 300px; /* 固定高度 */ object-fit: cover; /* 保持比例填充 */ border-radius: 8px; /* 圆角效果 */ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */ } /* 文字区域样式 */ .text-content { flex: 1; /* 占据剩余空间 */ padding: 15px; } /* 响应式设计 */ @media (max-width: 768px) { .content-block { flex-direction: column; /* 小屏幕改为垂直排列 */ } .content-img { width: 100%; /* 全宽显示 */ height: auto; /* 自适应高度 */ } } </style> </head> <body> <!-- 左图右文布局 --> <div class="content-block"> <img src="example1.jpg" alt="自然风景" class="content-img"> <div class="text-content"> <h2>自然之美</h2> <p>清晨的山谷笼罩在薄雾之中,阳光穿透云层洒在青翠的树林上。溪水潺潺流过布满青苔的岩石,空气中弥漫着泥土野花的芬芳...</p> <p>拍摄地点:黄山风景区<br>拍摄时间:2023年5月</p> </div> </div> <!-- 右图左文布局 --> <div class="content-block" style="flex-direction: row-reverse;"> <img src="example2.jpg" alt="城市夜景" class="content-img"> <div class="text-content"> <h2>都市之夜</h2> <p>夜幕降临后的城市展现出截然不同的面貌,霓虹灯光在玻璃幕墙上流转,车流化作光的河流穿梭于摩天大楼之间...</p> <ul> <li>拍摄设备:Canon EOS R5</li> <li>曝光时间:15秒</li> <li>ISO设置:800</li> </ul> </div> </div> </body> </html> ``` **关键功能说明**: 1. **布局系统**: - 使用Flexbox实现灵活的图文排列 - 通过`flex-direction`控制左右布局 - `gap`属性设置图片文字的间距 2. **图片处理**: - `object-fit: cover`保持图片比例 - 阴影圆角提升视觉效果 - 响应式图片自动调整大小 3. **文字排版**: - 合理的行高设置(`line-height: 1.6`) - 标题与正文的层次区分 - 列表项排版优化 4. **响应式设计**: - 媒体查询适配移动端 - 屏幕小于768px时自动切换为垂直布局 - 图片宽度自适应处理 **实际使用时需要**: 1. 将`example1.jpg``example2.jpg`替换为实际图片路径 2. 推荐图片尺寸比例保持4:3(与样式设置匹配) 3. 文字内容可根据需求自由修改 **扩展建议**: 1. 添加图片悬停放大效果: ```css .content-img { transition: transform 0.3s; } .content-img:hover { transform: scale(1.03); } ``` 2. 增加图片说明文字层: ```html <div class="image-container"> <img ...> <div class="image-caption">图:黄山日出</div> </div> ``` 3. 实现懒加载: ```html <img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy"> ``` 该模板适用于: - 个人作品集 - 产品展示页 - 旅游博客 - 新闻资讯页 如果需要实现特定交互效果(如图片轮播、灯箱查看等),可以告诉我具体需求,我会提供对应的代码实现方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值