Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to set the vertical position of the text in the framework of CSS. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Method 1: change the frame style to a table cell and use the vertical-align property

If you change the frame style to a table cell, you can use the vertical-align property to specify the vertical position.

Write the following code in CSS and set the vertical position.

Example of top alignment

.TextVerticalTop {

Display:table-cell

Vertical-align:top

}

Example of bottom alignment

.TextVerticalBottom {

Display:table-cell

Vertical-align:bottom

}

Centering exampl

.TextVerticalCenter {

Display:table-cell

Vertical-align:middle

}

Method 2: specify by relative position using position:relative

If position:relative specifies a style, you can specify the internal placement location in relative coordinates.

Specifies the location of the text to display within the relative position (for example, "50%").

Example of top alignment

Span.top {

Position:absolute

Top:0

}

Example of bottom alignment

Span.bottom {

Position:absolute

Bottom:0

}

Centering exampl

Span.center {

Position:absolute

Top:50%

Margin-top:-0.5em

}

Code example: using display:table-cell

The code is as follows:

TextAlignVerticalCell.html

Align vertically at the top.

Align vertically at the bottom.

Center vertical alignment.

TextAlignVerticalCell.css

.TextVerticalTop {

Height:96px

Width:280px

Margin-top:24px

Margin-left:32px

Border:1pxsolid#009347

Display:table-cell

Vertical-align:top

}

.TextVerticalBottom {

Height:96px

Width:280px

Margin-top:24px

Margin-left:32px

Border:1pxsolid#009347

Display:table-cell

Vertical-align:bottom

}

.TextVerticalCenter {

Height:96px

Width:280px

Margin-top:24px

Margin-left:32px

Border:1pxsolid#009347

Display:table-cell

Vertical-align:middle

}

Description:

Display:table-cell treats div tags as table cells. In the case of processing as a table cell, in order to effectively use the vertical-align property, use vertical-align to set the vertical position of the internal text.

Display:table-cell is set because it is no longer a block element, so it does not wrap at the end of the div tag, so the newline tag is used.

This is the end of the article on "how to set the vertical position of the text in the CSS frame". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.