Align text height html

How to Vertically Center Text with CSS

Centering elements vertically with CSS often gives trouble. However, there are several ways of vertical centering, and each is easy to use.

Use the CSS vertical-align property

The vertical-align property is used to vertically center inline elements.

The values of the vertical-align property align the element relative to its parent element:

• Line-relative values vertically align an element relative to the entire line.
• Values for table cells are relative to the table-height-algorithm, which commonly refers to the height of the row.

It is important to note that it is possible to nudge text vertically up or down in CSS using the vertical-align property. This property sets the vertical alignment of an inline or table-cell element, and can be used to adjust the vertical position of text within its container.

Note that vertical-align only applies to inline or table-cell elements, so it may not work as expected on block-level elements such as or

. In such cases, you may need to wrap the text in an inline or table-cell element to apply vertical-align .

Example of vertically aligning a text:

html> html> head> title>Title of the document title> style> div < display: table-cell; width: 250px; height: 200px; padding: 10px; border: 3px dashed #1c87c9; vertical-align: middle; > style> head> body> div>Vertically aligned text div> 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 , , and )

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.

Источник

Align Text Vertically in CSS

1. Use the line-height Property to Align Text Vertically in CSS
2. Use span Inside a div Along With the line-height Property to Align Text Vertically in CSS
3. Use flexbox to Align Text Vertically in CSS

We will introduce three methods of vertically aligning a text in CSS.

Use the line-height Property to Align Text Vertically in CSS

If we have single-line text, we can use the line-height property to align the text vertically within a div . The line-height CSS property sets the height of a line box. It is used to set the distance between lines of text. However, we can also use it to align our one-line text vertically. This technique will not work if the text has line breaks or is of more than one line. We can give line-height any value according to our requirement on where we want to align the text vertically.

For example, create a div and write a one-line text inside it. Let us give the div a class name of center . Write a one-line text Vertically aligned inside the div . Give the div a height of 100px and line-height of 100px to vertically align the text to the center of the div. Lastly, give the div a border of 1px solid black to see the vertical alignment.

The example below shows that the text is aligned vertically to the center of the div containing height of 100 px and border of 1px solid black using CSS line-height property.

div class="center"> Vertically aligned div> 

.center   height : 100px;  line-height : 100px;  border : 1px solid black; > 

Use span Inside a div Along With the line-height Property to Align Text Vertically in CSS

We can also align multiple numbers of lines vertically using the line-height property. We can place a span tag inside a div tag and put multiple lines inside the span tag. We can use the br tag to break the line and make it a multiple-line text. Then we can use the line-height property for both div and span . We will also use the display: inline-block CSS property for the span tag to wrap multiple lines of code together. Therefore we also have to use the line-height CSS property inside span to separate multiple-line text from one another.

For example, create a div and then a span inside the div . Write multiple lines of text inside that span with the help of br tag. In CSS select the div and give the height of 100px and set line-height to 100px . Set the div border of 1px solid black to see the alignment. Set the display property of the span tag to inline-block to wrap multiple lines of text together. Give line-height to 20px to the span to give a gap between multiple lines of text. Keep the vertical-align to middle to vertically place the text exactly in the middle.

The example below shows the vertical alignment of multiple lines of text within a div with the help of line-height and display: inline-block property.

div>  span>  Multiple br> line br> code  span>  div> 

div  height : 100px;  line-height: 100px;  border : 1px solid black > span   display : inline-block;  vertical-align : middle;  line-height : 20px; > 

Use flexbox to Align Text Vertically in CSS

We can also use flexbox to align a text within a div vertically or horizontally. We can use flexbox by setting the display property to flex . After setting the display property to flex , we can use align-items property and put its value as center to align a text vertically within a div . We can use the justify-content property and set it to center to center the text within a div horizontally. Flexboxes are very easy to use, and they are very effective as well.

For example, create a div and write single or multiple lines of text inside it. Use the br tag to make multiple lines of text. Give a height of 100px to the div . Set the border as 1px solid black to see the alignment. Put the value of the display property as flex to use flexbox . Then, set the align-items to center to align the text vertically within the div to the center. We can also align the text horizontally by putting the value of justify-content to center .

Thus, we can use flexbox to align the text horizontally and vertically in CSS.

div>  Align br> Text to br> Center div> 

div   height : 100px;  border : 1px solid black;  display : flex;  align-items : center;  justify-content : center; > 

Источник