html - 文本与图像垂直居中

Question

我已经尝试了 Stack Overflow 上发布的几种解决方案，以及我在 Google 上找到的其他解决方案。

我试图让一些文本在图像旁边垂直居中对齐。

有问题的页面位于 here .

在页面底部附近，有这样的文字:“整数是有理数，因为它们可以写成以下形式:”，后面是一张图片。图像总是向上 float 到一边，而不是与文本居中对齐。我希望它看起来好像图像是与文本一起输入的。

我本来是把文字和图片放在一个段落里的，但是根据我在 Stack Overflow 上找到的解决方案，我把文字和图片移动到一个 div 中，并为其分配了一些 CSS:

    vertical-align: middle; display: inline-block;

我还尝试了其他各种建议的方法:

    vertical-align: middle; display: table-cell;

这一张图片没什么大不了的，但我计划让很多页面都有数学问题。当我的页面包含多个图像时，我认为它看起来会非常糟糕。

到目前为止，其他线程都没有解决我的具体问题。

感谢您提供的任何帮助。

Answer 1

img{
  vertical-align:middle;
}

This is some text <img src="http://i.stack.imgur.com/wplIb.png">

特别是在您的页面上，使用您可以选择的开发工具来处理结果: