Maison > interface Web > tutoriel HTML > css3实现元素水平垂直居中_html/css_WEB-ITnose

css3实现元素水平垂直居中_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 09:05:34
original
1372 Les gens l'ont consulté


css3实现元素水平垂直居中,代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>html,body{    width:100%;    height:100%;    display: -webkit-box;    -webkit-box-orient: horizontal;    -webkit-box-pack: center;    -webkit-box-align: center;    display: -moz-box;    -moz-box-orient: horizontal;    -moz-box-pack: center;    -moz-box-align: center;    display: -o-box;    -o-box-orient: horizontal;    -o-box-pack: center;    -o-box-align: center;    display: -ms-box;    -ms-box-orient: horizontal;    -ms-box-pack: center;    -ms-box-align: center;    display: box;box-orient: horizontal;    box-pack: center;    box-align: center;}.main{    width: 300px;    height: 200px;    padding: 10px;    border: 1px solid #ccc;    margin: 20px auto;    display: -webkit-box;    -webkit-box-orient: horizontal;    -webkit-box-pack: center;    -webkit-box-align: center;    display: -moz-box;    -moz-box-orient: horizontal;    -moz-box-pack: center;    -moz-box-align: center;    display: -o-box;    -o-box-orient: horizontal;    -o-box-pack: center;    -o-box-align: center;    display: -ms-box;    -ms-box-orient: horizontal;    -ms-box-pack: center;    -ms-box-align: center;    display: box;    box-orient: horizontal;    box-pack: center;    box-align: center; }.main img{    width:70%;    height: 70%;}</style></head><body>    <div class="main">	<img  src="login-bg.jpg"/ alt="css3实现元素水平垂直居中_html/css_WEB-ITnose" >    </div></body></html>
Copier après la connexion


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal