fixed height)

When talking about this issue, some people may ask, isn't there a vertical-align attribute in CSS to set vertical centering? Even if some browsers don't support it, I just need to use a little CSSHack technology! So I have to say a few more words here. There is indeed a vertical-align attribute in CSS, but it only works for elements in (X)HTML elements that have the valign attribute, such as <td>, <th>, <caption> in table elements, while elements like <div> and <span> do not have the valign attribute, so using vertical-align will not work for them.
1. Single line vertical centering <br />If there is only one line of text in a container, centering it is relatively simple. We only need to set its actual height equal to the line-height of the line in which it resides.
like:

Copy code

The code is as follows:

div{
height:25px;
line-height:25px;
overflow:hidden;
}

This code is very simple. The overflow:hidden setting is used later to prevent the content from exceeding the container or causing automatic line wrapping, which would prevent the vertical centering effect from being achieved. More CSS tutorials.

Copy code

The code is as follows:

2. Vertical centering of multiple lines of text of unknown height <br />If the height of a paragraph is variable, we can use the last method mentioned in the previous section to achieve horizontal centering, which is to set Padding so that the upper and lower
The padding values can be the same. Again, this is a way to "appear" to be vertically centered, it's just a way of making the text completely fill the <div>. You can use code similar to the following:

Copy code

The code is as follows:

div{
padding:25px;
}

The advantage of this method is that it can run on any browser and the code is very simple, but the premise of this method is that the height of the container must be scalable.

Copy code

The code is as follows:

3. Centering multiple lines of text with fixed height <br />At the beginning of this article, we have said that the vertical-align attribute in CSS will only work for (X)HTML tags with the valign attribute, but there is also a display attribute in CSS that can simulate <table>, so we can use this attribute to make <div> simulate <table> and use vertical-align. Note that display:table and display:table-cell must be set on the parent element, and display:table-cell must be set on the child element, so we need to add another <div> element for the text that needs to be positioned:

Copy code

The code is as follows:

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

Copy code

The code is as follows:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Multi-line text vertical centering</title>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<styletype="text/css">
body{font-size:12px;font-family:tahoma;}
div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div ="wrap">
<divid="content"><pre>Now we want to vertically center this text! Webjx.Com
div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
</html>

This method should be ideal, but unfortunately Internet Explorer 6 does not correctly understand display: table and display: table-cell, so this method is invalid in Internet Explorer 6 and below. Well, this is very depressing! But we have other ways
4. Solution in Internet Explorer
In Internet Explorer 6 and below, there are defects in the calculation of altitude. After positioning the parent element in Internet Explorer 6, if you perform percentage calculations on the child elements, the basis for the calculation seems to be inherited (if the positioned value is an absolute value, there is no such problem, but the basis for percentage calculation will no longer be the height of the element, but the positioned height inherited from the parent element). For example, we have the following (X)HTML snippet:

Copy code

The code is as follows:

If we absolutely position subwrap, content will also inherit this property. Although it will not be displayed immediately on the page, if you relatively position content, the 100% ratio you use will no longer be the original height of the content. For example, if we set the position of subwrap to 40%, if we want the top edge of content to coincide with wrap, we must set top: -80%; then, if we set subwrap's top: 50%, we must use 100% to return content to its original position, but what if we also set content to 50%? Then it's exactly centered vertically. So we can use this method to achieve vertical centering in Internet Explorer 6:

Copy code

The code is as follows:

div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}
div#content{
border:1pxsolid#000;
position:relative;
top:-50%;
}

Of course, this code will only work in browsers with computational problems, such as Internet Explorer 6. (But I don’t understand. I have consulted many articles, and I don’t know whether it is because of the same source or some other reason, but it seems that many people are unwilling to explain the principle of this bug in InternetExlporer6. I have only understood a little bit, and I need to study it further.)

Copy code

The code is as follows:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Multi-line text vertical centering</title>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<styletype="text/css">
body{font-size:12px;font-family:tahoma;}
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap{
position:absolute;
top:50%;
}
div#content{
position:relative;
top:-50%;
}
</style>
</head>
<body>
<div ="wrap">
<divid="subwrap">
<divid="content"><pre>Now we want to vertically center this text!
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}
div#content{
border:1pxsolid#000;
position:relative;
top:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>

5. Perfect solution <br />Then we can get a perfect solution by combining the above two methods, but this requires the knowledge of CSShack. For how to use CSSHack to distinguish browsers, you can refer to this "Simple CSShack: distinguish IE6, IE7, IE8, Firefox, Opera":

Copy code

The code is as follows:

div#wrap{
display:table;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content{
_position:relative;
_top:-50%;
}

At this point, a perfect centering solution is created.

Copy code

The code is as follows:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Multi-line text vertical centering</title>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<styletype="text/css">
body{font-size:12px;font-family:tahoma;}
div#wrap{
display:table;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content{
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<div ="wrap">
<divid="subwrap">
<divid="content"><pre>Now we want to vertically center this text!
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}
div#content{
border:1pxsolid#000;
position:relative;
top:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>

The value of vertical-align for ps vertical center is middle, while the value of horizontal center align is center. Although both are centered, the keywords are different.

<<: How does MySQL ensure master-slave consistency?

>>: What are the differences between xHTML and HTML tags?

Nginx reverse proxy to go-fastdfs case explanation

N ways to vertically center a div with single/multi-line text (unknown height/fixed height)

Nginx reverse proxy to go-fastdfs case explanation

Summary of common functions and usage methods of WeChat applet development

JavaScript Canvas draws dynamic wireframe effect

Use the sed command to modify the kv configuration file in Linux

Usage and scenario analysis of npx command in Node.js

Sharing tips on using vue element and nuxt

VMware pro15 installation macOS10.13 detailed installation diagram (picture and text)

Analysis and description of network configuration files under Ubuntu system

Detailed explanation of Linux CPU load and CPU utilization

How to delete a property of an object in JavaScript

Recommend

A practical tutorial on how to quickly insert tens of millions of records into MySQL

Summary of four ways to introduce CSS (sharing)

How to query data within a certain period of time with Vue front-end and Django back-end

Windows system mysql5.7.18 installation graphic tutorial

3 functions of toString method in js

Detailed explanation of Javascript basics loop

Summary of DTD usage in HTML

JS realizes special effects of web page navigation bar

JavaScript data transmission between different pages (URL parameter acquisition)

Use the sed command to modify the kv configuration file in Linux

Solutions for building ping and nfs in embedded Linux development environment

Binary installation of mysql 5.7.23 under CentOS7

Using Docker+jenkins+python3 environment to build a super detailed tutorial

js implements mouse in and out card switching content

MySql Installer 8.0.18 Visual Installation Tutorial with Pictures and Text