Maison >interface Web >tutoriel HTML >Exemple de code pouvant centrer les images et le texte horizontalement et verticalement (compatible avec IE6)
Exemple de code pouvant centrer les images et le texte horizontalement et verticalement (compatible avec IE6)
- 高洛峰original
- 2017-03-15 09:22:421378parcourir
Centrage horizontal et verticalImages et texte (compatible avec IE6) Exemple
Regardez directement le code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>水平垂直居中</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { margin: 0; padding: 0; font-size: 12px; color: #FFF; }
.container {
display: table; /*主要代码*/
*position: relative; /*for ie67*/
background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;
}
.content {
vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/
*position: absolute; *top: 50%; *left: 50%; /*for ie67*/
}
.center {
display: inline-block; /*主要代码*/
*display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/
padding: 10px; border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="center">
<img src="https://static.cnblogs.com/images/adminlogo.gif" /><br/>
居中居中居中居中居中居中居中居中居中.....
</div>
</div>
</div>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn