Centering Text Vertically with Image

Question

I have tried several of the solutions posted on Stack Overflow, as well as others that I found on Google.

I am attempting to get some text to align vertically-centered alongside of an image.

The page in question is located here .

Near the bottom of the page, there is text that reads: " Integers are rational numbers because they can be written in the form: ", followed by an image. The image always floats up and off to the side, instead of being centered inline with the text. I want it to appear as if the image is typed inline with the text.

I originally had the text and image in a paragraph, but based on the solutions I found on Stack Overflow, I moved the text and image into a div, and assigned some CSS to it:

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

I also tried various other methods that were suggested:

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

This single image isn't a huge deal, but I plan on having many pages with math problems. When I have pages with multiple images, I think it's going to look really bad.

So far none of the other threads have fixed my specific issue.

Thanks for any help you can provide.

Answer 1

 img{ vertical-align:middle; } 

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

Specifically on your page, using a Developer tools of choice you can play with the result:

Answer 2

一种解决方案将使用表放置在每个表中，每个表具有2个单元格，从而使中间垂直对齐