How to vertically align text in css-CSS Tutorial-php.cn

How to vertically align text in css: 1. Set the actual height of the line of text to be equal to the height of the line-height; 2. Set the upper and lower padding values to be the same to vertically center multiple lines of text of unknown height. ;3. Use vertical-align to center multi-line text at a fixed height.

How to vertically align text in css

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version. This method is suitable for all brands of computers.

Recommendation: "css video tutorial"

1. Vertical center alignment of a single line of text

If there is only one line of text in a container, center it It is relatively simple. We only need to set its actual height to be equal to the height of the row.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 单行文字实现垂直居中 </title>
<style type="text/css">
div {
height: 100px;
line-height: 100px;
border: 1px solid #FF0099;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>

Copy after login

Rendering:

How to vertically align text in css

However, in Internet Explorer 6 and below, this method does not support images Set vertical centering.

2. Vertical centering of multi-line text of unknown height

If the height of a piece of content is variable, then we can use the horizontal centering method mentioned in the previous section. The last method is to set the padding so that the upper and lower padding values are the same. Again, this "looks" like vertical centering, it's just a way of making the text completely fill the

. You can use code similar to the following:

div {
padding:25px;
}

Copy after login

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文字实现垂直居中 </title>
<style type="text/css">
div {
padding: 25px;
border: 1px solid #FF0099;
width: 300px;
}
</style>
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！
div {
padding:25px;
border:1px solid #FF0099;
}

Copy after login

Rendering:

How to vertically align text in css

3. Centering of fixed-height multi-line text

The vertical-align attribute in CSS will only work on (X)HTML tags with the valign attribute, but there is also a display attribute in CSS that can simulate

, so we can use this attribute Let

simulate

and you can use vertical-align.

Note that when using display:table and display:table-cell, the former must be set on the parent element, and the latter must be set on the child element, so we need to add another < for the text that needs to be positioned. ;div>Element:

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
width:760px;
}

Copy after login

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文字实现垂直居中 </title>
<style type="text/css">
div#wrap {
height: 300px;
display: table;
}
div#content {
vertical-align: middle;
display: table-cell;
border: 1px solid #FF0099;
width: 300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！
</div>
</div>
</body>
</html>

Copy after login

Rendering:

How to vertically align text in css

The above is the detailed content of How to vertically align text in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css

source：php.cn

Previous article：How to select parent element in css Next article：How to modify the background image width and height with css

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn