Home > Article > Web Front-end > How to vertically align text in css
How to vertically align text in css
- 藏色散人Original
- 2020-12-18 10:17:195358browse
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.
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>Rendering:
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
div {
padding:25px;
}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;
}
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!