如何在浮动图像中垂直对齐替代文本? [英] How to vertical-align an alternate text within a floated image?

问题描述

尝试了一些与垂直对齐有关的解决方案，但我似乎无法解决此问题.不知道是否有人可以帮助我.我想要的只是将替代文本放置在空白图像的中间.

Having tried some of the solutions relating to vertical align, I don't seem to be able to solve this. Not sure if anyone can help me on this. All I want is to position the alternate text in the middle of an empty image.

这是html代码:

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

这是CSS代码:

.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;
}

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

Thanks for taking your time to read.

推荐答案

编辑2017:

edit 2017: Flexbox FTW (probably with a both as a flex item (its container having default vertical/second axis align-items: stretch) and a flex container (vertical alignment is then achieved with flex-direction:column and justify-content: whatisneeded)

我相信@alt具有其内容的高度，远远小于100px.

I believe @alt has the height of its content, far less than 100px.

通过固定等于高度的 line-height ，vetical-align将完成您想要的操作.
这是一个小提琴: http://jsfiddle.net/PhilippeVay/Xevph/

By fixing a line-height equal to height, vetical-align will do what you intend it to do.
Here is a fiddle: http://jsfiddle.net/PhilippeVay/Xevph/

这篇关于如何在浮动图像中垂直对齐替代文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！