- How to Center the Text in the HTML Table Row
- Create HTML
- Add CSS
- Example of centering the text in table row using the CSS text-align property:
- Result
- Example of centering the text in table row using the style attributes:
- Example of centering only elements:
- vertical-align
- Try it
- Syntax
- Values for inline elements
- Parent-relative values
- Line-relative values
- Values for table cells
- Formal definition
- Formal syntax
- Examples
- Basic example
- HTML
- CSS
- Result
- Vertical alignment in a line box
- HTML
- Result
- Vertical alignment in a table cell
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- CSS Table Alignment
- Example
- Vertical Alignment
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
How to Center the Text in the HTML Table Row
Earlier, it was possible to do this using the align attribute, however, it is deprecated in HTML5. Instead of using that attribute, use the CSS text-align property, or specify it through the inline style attributes.
In this snippet, we’ll show and explain examples with the text-align property and style attribute.
Create HTML
table> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> table>
Add CSS
table, table td < border: 1px solid #cccccc; > td < height: 80px; width: 160px; text-align: center; vertical-align: middle; >
Now, you can see the full example.
Example of centering the text in table row using the CSS text-align property:
html> html> head> style> table, table td < border: 1px solid #cccccc; > td < height: 80px; width: 160px; text-align: center; vertical-align: middle; > style> head> body> table> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> table> body> html>
Result
In our next example, we specify the text-align and vertical-align properties through the style inline attribute.
Example of centering the text in table row using the style attributes:
html> html> head> style> td < height: 80px; width: 160px; > style> head> body> table border="1"> tr> td style="text-align: center; vertical-align: middle;">Text td> td style="text-align: center; vertical-align: middle;">Text td> tr> tr> td style="text-align: center; vertical-align: middle;">Text td> td style="text-align: center; vertical-align: middle;">Text td> tr> table> body> html>
The style attribute overrides the styles set globally. It will override any style set in the tag or external style sheet.
Example of centering only elements:
html> html> head> style> table, table th, td < border: 1px solid #cccccc; border-collapse: collapse; > th, td < height: 80px; width: 160px; padding: 5px 10px; vertical-align: middle; > th < text-align: right; > td < text-align: center; > style> head> body> table> thead> tr> th>Heading th> th>Heading th> tr> thead> tbody> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> tbody> table> body> html>
vertical-align
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
Try it
The vertical-align property can be used in two contexts:
- To vertically align an inline-level element’s box inside its containing line box. For example, it could be used to vertically position an image in a line of text.
- To vertically align the content of a cell in a table.
Note that vertical-align only applies to inline, inline-block and table-cell elements: you can’t use it to vertically align block-level elements.
Syntax
/* Keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* values */ vertical-align: 10em; vertical-align: 4px; /* values */ vertical-align: 20%; /* Global values */ vertical-align: inherit; vertical-align: initial; vertical-align: revert; vertical-align: revert-layer; vertical-align: unset;
The vertical-align property is specified as one of the values listed below.
Values for inline elements
Parent-relative values
These values vertically align the element relative to its parent element:
Aligns the baseline of the element with the subscript-baseline of its parent.
Aligns the baseline of the element with the superscript-baseline of its parent.
Aligns the top of the element with the top of the parent element’s font.
Aligns the bottom of the element with the bottom of the parent element’s font.
Aligns the middle of the element with the baseline plus half the x-height of the parent.
Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property. A negative value is allowed.
Line-relative values
The following values vertically align the element relative to the entire line:
Aligns the top of the element and its descendants with the top of the entire line.
Aligns the bottom of the element and its descendants with the bottom of the entire line.
For elements that do not have a baseline, the bottom margin edge is used instead.
Values for table cells
baseline (and sub , super , text-top , text-bottom ,
Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
Aligns the top padding edge of the cell with the top of the row.
Centers the padding box of the cell within the row.
Aligns the bottom padding edge of the cell with the bottom of the row.
Negative values are allowed.
Formal definition
Initial value | baseline |
---|---|
Applies to | inline-level and table-cell elements. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Percentages | refer to the line-height of the element itself |
Computed value | for percentage and length values, the absolute length, otherwise the keyword as specified |
Animation type | a length |
Formal syntax
Examples
Basic example
HTML
div> An img src="frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment. div> div> An img class="top" src="frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment. div> div> An img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment. div> div> An img class="middle" src="frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment. div>
CSS
img.top vertical-align: text-top; > img.bottom vertical-align: text-bottom; > img.middle vertical-align: middle; >
Result
Vertical alignment in a line box
HTML
p> top: img style="vertical-align: top" src="star.png" alt="star"/> middle: img style="vertical-align: middle" src="star.png" alt="star"/> bottom: img style="vertical-align: bottom" src="star.png" alt="star"/> super: img style="vertical-align: super" src="star.png" alt="star"/> sub: img style="vertical-align: sub" src="star.png" alt="star"/> p> p> text-top: img style="vertical-align: text-top" src="star.png" alt="star"/> text-bottom: img style="vertical-align: text-bottom" src="star.png" alt="star"/> 0.2em: img style="vertical-align: 0.2em" src="star.png" alt="star"/> -1em: img style="vertical-align: -1em" src="star.png" alt="star"/> 20%: img style="vertical-align: 20%" src="star.png" alt="star"/> -100%: img style="vertical-align: -100%" src="star.png" alt="star"/> p>
#* box-sizing: border-box; > img margin-right: 0.5em; > p height: 3em; padding: 0 0.5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%; >
Result
Vertical alignment in a table cell
HTML
table> tr> td style="vertical-align: baseline">baselinetd> td style="vertical-align: top">toptd> td style="vertical-align: middle">middletd> td style="vertical-align: bottom">bottomtd> td> p> There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable. p> p> There is another theory which states that this has already happened. p> td> tr> table>
CSS
table margin-left: auto; margin-right: auto; width: 80%; > table, th, td border: 1px solid black; > td padding: 0.5em; font-family: monospace; >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 18, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
CSS Table Alignment
To left-align the content, force the alignment of elements to be left-aligned, with the text-align: left property:
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Example
Vertical Alignment
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Example
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.