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?

The difference between ${param} and #{param} in MySQL

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

The difference between ${param} and #{param} in MySQL

Detailed explanation of the implementation process of building a kernel tree in Ubuntu 12.04

Nginx monitoring issues under Linux

Build Maven projects faster in Docker

Detailed explanation of non-parent-child component communication in Vue3

Summary of various methods for JavaScript to determine whether it is an array

js implements custom drop-down box

Implementation steps for docker-compose to deploy etcd cluster

Font references and transition effects outside the system

How to configure MySQL master-slave replication under Windows

Recommend

Summary of several commonly used string methods in JavaScript (must-read for beginners)

Detailed explanation of new relational database features in MySQL 8.0

A brief discussion on MySQL index design principles and the differences between common indexes

Solution to the problem that MySQL can be started when installed in WAMP but cannot be started after restart

MySQL stored procedure in, out and inout parameter examples and summary

Share 5 helpful CSS selectors to enrich your CSS experience

Today I will share some rare but useful JS techniques

Solution to "No such file or directory" in locale after installing glibc-2.14 in CentOS6.5

Detailed explanation of the process of building an MQTT server using Docker

Detailed explanation of semiotics in Html/CSS

JavaScript to achieve skin effect (change background)

Install MySQL 5.7.17 in win10 system

Teach you to use dozens of lines of js to achieve cool canvas interactive effects

How to run MySQL using docker-compose

DIV and image horizontal and vertical centering compatible with multiple browsers