Implementation of vertical centering with unknown height in CSS
|
This article mainly introduces the implementation of vertical centering of unknown height in CSS, and shares it with you. The details are as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>CSS vertical center</title>
<style type="text/css">
.container{
width:500px;/*Decoration*/
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<h1>Vertical center (table)</h1>
<div class='container'>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</td>
</tr>
</table>
</div>
</body>
</html>Okay, let's look at its CSS implementation. Anything that tables can do, CSS can do, but CSS differs greatly from browser to browser, so it is very difficult to be compatible with them. This involves many details, various flows, display effects and CSS hacks. IE developed a lot of private attributes in the early years, which we need to explore further. Let's first look at the simplest implementation, the background image method Background Image Method
<!doctype html>
<html>
<head>
<title>CSS vertical center</title>
<style type="text/css">
.container {
width:500px;
height:500px;
line-height:500px;
background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg) no-repeat center center;
border:1px solid #f00;
text-align: center;
}
</style>
</head>
<body>
<h1>Vertical center</h1>
<div class="container">
</div>
</body>
</html>CSS Expression Method
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>Situ Zhengmei CSS vertical centering</title>
<style type="text/css">
.container{
/*IE8 vertically aligns with standard browsers*/
display: table-cell;
vertical-align:middle;
width:500px;/*Decoration*/
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
.container img{
display:block;/*Let it have a box model*/
margin:0 auto;
text-align:center;
margin-top:expression((500 - this.height )/2);/*Allow IE567 to align vertically*/
}
</style>
</head>
<body>
<h1>Vertical center (CSS expression)</h1>
<div class="container">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</div>
</body>
</html>Absolute positioning method
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>Situ Zhengmei CSS vertical centering</title>
<style type="text/css">
div {
/*IE8 vertically aligns with standard browsers*/
display:table-cell;
vertical-align:middle;
overflow:hidden;
position:relative;
text-align:center;
width:500px;/*Decoration*/
height:500px;
border:1px solid #ccc;
background:#B9D6FF;
}
div p {
+position:absolute;
top:50%
}
img {
+position:relative;
top:-50%;
left:-50%;
}
</style>
</head>
<body>
<h1>Vertical center (absolute positioning)</h1>
<div class="container">
<p>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</p>
</div>
</body>
</html>display:inline-block method
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>Situ Zhengmei CSS vertical centering</title>
<style type="text/css">
div {
display:table-cell;
vertical-align:middle;
text-align:center;
width:500px;
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
</style>
<!--[if IE]>
<style type="text/css">
i {
display:inline-block;
height:100%;
vertical-align:middle
}
img {
vertical-align:middle
}
</style>
<![endif]-->
</head>
<body>
<h1>Vertical centering (inline-block method)</h1>
<div class="container">
<i></i>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</div>
</body>
</html>Writing-mode
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>CSS vertical center</title>
<style type="text/css">
div{
width:500px;
height:500px;
line-height:500px;
text-align:center;
background:#B9D6FF;
border:1px solid #f00;
}
div span{
height:100%\9;
writing-mode:tb-rl\9;
}
div img{
vertical-align:middle
}
</style>
</head>
<body>
<h1>Vertical centering (writing-mode method)</h1>
<div class="container">
<span>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
</span>
</div>
</body>
</html>
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: MySQL 5.7 cluster configuration steps
>>: How to configure eureka in docker
Recommend
Preventing SQL injection in web projects
Table of contents 1. Introduction to SQL Injectio...
Sample code for modifying the input prompt text style in html
On many websites, we have seen the input box disp...
Vue realizes screen adaptation of large screen pages
This article shares the specific code of Vue to a...
Detailed explanation of loop usage in javascript examples
I was bored and sorted out some simple exercises ...
How to use rem adaptation in Vue
1. Development environment vue 2. Computer system...
Docker file storage path, modify port mapping operation mode
How to get the container startup command The cont...
SSH port forwarding, local port forwarding, remote port forwarding, dynamic port forwarding details
Part 1 Overview of SSH Port Forwarding When you a...
HTML table markup tutorial (10): cell padding attribute CELLPADDING
Cell padding is the distance between the cell con...
MySQL 8.0.19 installation detailed tutorial (windows 64 bit)
Table of contents Initialize MySQL Install MySQL ...
Detailed explanation of MySql slow query analysis and opening slow query log
I have also been researching MySQL performance op...
A detailed introduction to the netstat command in Linux
Table of contents 1. Introduction 2. Output Infor...
MySQL5.7 single instance self-starting service configuration process
1.MySQL version [root@clq system]# mysql -v Welco...
Solution to Docker image downloading too slowly
Docker image download is stuck or too slow I sear...
Detailed basic operations on data tables in MySQL database
Table of contents 1. View the tables in the curre...
MySQL 8.0.12 decompression version installation tutorial
This article shares the installation tutorial of ...