CSS: Why is the image offset when line-height is identical to block height?

Question

MySQL

Take a fixed size block and give it a line-height the same as the height.
We place the image inside with vertical alignment in the middle.
We observe the shift of the picture down.
cssdeck.com/labs/mphyqlfj
How to solve the problem is not the question (table cell emulation is currently the most reasonable way), the question is why this happens.
After all, theoretically, the middle of the picture should stand exactly in the middle of the line, and the latter runs along the middle of the block.

Answer 1

Everything, I figured it out myself, 3 hours of smoking docks and here is a crooked result, but it works pretty fast:

(SELECT `id`,`tag`,`name`,`html`,`img`, '1' as `type`, `category`, (IF (tb_table1.name LIKE '%Бао лала%', 2, 0) + IF (tb_table1.name LIKE '%Бао%', 1, 0) + IF (tb_table1.name LIKE '%лала%', 1, 0)) AS points FROM tb_table1)
UNION
(SELECT `id`,`tag`,`name`,`html`,`img`, '2' as `type`, `category`, (IF (tb_table2.name LIKE '%Бао лала%', 2, 0) + IF (tb_table2.name LIKE '%Бао%', 1, 0) + IF (tb_table2.name LIKE '%лала%', 1, 0)) AS points FROM tb_table2) 
UNION 
(SELECT `id`,`tag`,`name`,`html`,`img`, '3' as `type`, '0' as `category`, (IF (tb_table3.name LIKE '%Бао лала%', 2, 0) + IF (tb_table3.name LIKE '%Бао%', 1, 0) + IF (tb_table3.name LIKE '%лала%', 1, 0)) AS points FROM tb_table3) 
UNION 
(SELECT `id`,`tag`,`name`,`html`,`img`, '4' as `type`, '0' as `category`, (IF (tb_table4.name LIKE '%Бао лала%', 2, 0) + IF (tb_table4.name LIKE '%Бао%', 1, 0) + IF (tb_table4.name LIKE '%лала%', 1, 0)) AS points FROM tb_table4) 
ORDER BY points DESC LIMIT 20

Answer 2

The problem is that you have made "many tables absolutely abstracted from each other".
And they shouldn't be. Do a lot of similar queries for each table or normalize the structure and you can already write something more specific. If the tables are not "absolutely abstracted from each other", then they can be joined via JOIN and make 1 query instead of 10.

Answer 3

Maybe you should forget about full-text search in Mysql, and use the same Elastic / Sphinx for this?
Build an index and do a normal lookup.

Answer 4

Use JOIN.

Answer 5

This is how the image is aligned - along the middle line.
For example, the font was Times New Roman , size 80px, italic.
Of course, the font parameters are of great importance - the aspect ratio (this is what is controlled by font-size-adjust ) and the distance for the lower extension lines.

Answer 6

because in this case the picture is an inline (or rather, inline-block) element. The offset value in this case depends on 2 properties: the font size and, directly, the font itself. To solve your problem without emulating a table layout, just set font-size: 0 to the wrapper.