Html vertical alignment and center alignment in h2 tag

Can you tell me if there are any errors in the code below? It does not align the text in the center or in the middle (vertically).

<td> <h2 style = "align:center; vertical-align:middle;">TEXT</h2></td> 
+8
html
source share
2 answers

To center an element on the page (horizontally and vertically), you can use the margins. There are various ways to do this; this is just one of them. Fields will be half the size of the container element. Example:

 <td style="width:100%; height:100%;"> <h2 style="position:absolute;top: 50%; left: 50%;">TEXT</h2> </td> 

NOTE The vertical-align property works with images, not text, so you need to find other solutions to center the text on the page or inside the element. One way is this; fields.

A drawback of this approach is that the center of the element is not taken to center it on the page; it is pushed in the middle of the borders of the element, so to speak. This means that with large elements, the upper left corner will be in the center of the page instead of the center point of the element. You can fix this using negative fields, given the size of the element. You need to know the size of the element you are centering. Example:

If the centered element (class .centered) is 200px by 100px, CSS to center it from the center of the element will look like this:

 .centered { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: 100px; } 
+3
source share

The style you are looking for is actually called text-align , not align . Moreover, the vertical-align style will not help you here if you want to vertically align the title inside your cell. Try the following:

 <td style="vertical-align: middle;"> <h2 style="text-align: center;">TEXT</h2> </td> 
+14
source share

All Articles