html – 如何在浮动图像中垂直对齐替换文本？

概述尝试了一些与垂直对齐有关的解决方案后,我似乎无法解决这个问题.不确定是否有人可以帮助我.我想要的是将替换文本放在空图像的中间. 这是html代码： <div class="viewport"> <a href="#"> <img src="http://yahoo.com/" alt="no image" /> </a> <div>Lorem ipsum dolor sit amet, 尝试了一些与垂直对齐有关的解决方案后,我似乎无法解决这个问题.不确定是否有人可以帮助我.我想要的是将替换文本放在空图像的中间.

这是HTML代码：

@H_403_13@<div > <a href="#"> <img src="http://yahoo.com/" alt="no image" /> </a> <div>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod temporincIDIDunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div></div>

这是CSS代码：

@H_403_13@.vIEwport { background: #bbb; wIDth: 350px; height: 300px; padding: 5px;}.vIEwport img { float: left; margin: 5px; wIDth: 100px; height: 100px; background: #000; text-align: center;}.vIEwport div { margin-left: 20px;}

感谢您抽出宝贵时间阅读.

解决方法 编辑2017： Flexbox FTW(可能同时作为flex项目(其容器具有默认的垂直/第二轴align-items：stretch)和flex容器(然后使用flex-direction：column和justify-content实现垂直对齐： whatisneeded)

我相信@alt的内容高度远低于100px.

通过固定等于高度的线高,vetical-align将完成您打算执行的 *** 作.
这是一个小提琴：http://jsfiddle.net/PhilippeVay/Xevph/

总结

以上是内存溢出为你收集整理的html – 如何在浮动图像中垂直对齐替换文本？全部内容，希望文章能够帮你解决html – 如何在浮动图像中垂直对齐替换文本？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。