All geek questions in one place

How to get text to support vertical alignment: medium?

In the following test example, the alt text is horizontally centered, but it is attached to the top of the window. How to get it in the middle?

<html> <body> <div style="height: 300px; width: 300px; border: solid black 1px;"> <img src="asdfasdf" alt="foo" style="display: block; text-align: center; vertical-align: middle"/> </div> </body> </html>
+4
source share
3 answers

One of the advantages of tables is that they provide vertical centering vertically. DIVs no. This is the case when I bite a bullet and add these ugly TPs and TDs.

 <table cellspacing="0" style="width:300px;height:300px;border:1px solid black;"> <tr> <td style="vertical-align:middle;text-align:center;"> <img src="asdfasdf" alt="foo" /> </td> </tr> </table>

He called the one-second centering table and the ugly as it is, it works.

+4
source

Try using some spaces at the beginning of the alt attribute. This is the only thing that seemed to work for me on chrome.

+1
source

Try with display:table-cell instead of block .

0
source

Source: https://habr.com/ru/post/1301645/

More articles:


All Articles