如何实现文本与图片完美居中对齐？附代码求助
2026-5-7
实现图片与文本完美垂直居中对齐的解决方案
嘿，我来帮你搞定图片和文本的垂直居中对齐问题！咱们从结构和样式两方面调整，保证效果精准到位：
第一步：修正HTML结构
原来的<div>直接包裹<li>不符合HTML语义规范，咱们换成<ul>，同时给图片加上alt属性增强可读性：
<body> <ul class="box3"> <li> <img src="pictures/contact/skype.png" width="34px" height="34px" alt="Skype icon" /> <span>Skype name</span> </li> <li> <img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" alt="Gadu-Gadu icon" /> <span>Gadu-Gadu number</span> </li> <li> <img src="pictures/contact/email.png" width="34px" height="34px" alt="Email icon" /> <span>Email address</span> </li> </ul> </body>
第二步：优化CSS样式
用Flex布局轻松实现垂直居中，同时调整细节让布局更规整：
body { left: 8%; top: 10%; position: absolute; background-color: #6699cc; margin: 0; /* 清除默认边距 */ } .box3 { background-color: #191919; padding: 15px 40px; font-size: 12px; color: #DDDDDD; font-family: Verdana; width: 400px; list-style: none; /* 去掉默认列表符号 */ margin: 0; padding-left: 0; /* 清除默认内边距 */ } .box3 > li { display: flex; /* 启用Flex布局 */ align-items: center; /* 垂直方向居中对齐 */ gap: 12px; /* 图片与文本之间添加间距，提升美观度 */ margin-bottom: 10px; /* 列表项之间添加间距 */ } .box3 > li:last-child { margin-bottom: 0; /* 最后一项去掉底部间距 */ } .box3 > li img { flex-shrink: 0; /* 防止图片被压缩变形 */ }
效果说明
- 用
<ul>代替<div>包裹列表项，符合HTML语义规范，避免潜在的样式冲突 - Flex布局的
align-items: center是实现垂直居中最可靠的方式，比vertical-align适配性更强 - 新增的间距让整体布局更宽松舒适，视觉体验更好
这样调整后，每个文本都会和对应的图片完美居中对齐啦！
内容的提问来源于stack exchange，提问作者user13371526
