Maison > Article > interface Web > Comment centrer un DIV en utilisant l'attribut position:fixed
Comment centrer un DIV en utilisant l'attribut position:fixed
- 不言original
- 2018-06-26 09:41:362794parcourir
Le code clé pour utiliser l'attribut position:fixed pour centrer le div est partagé avec vous ci-dessous : position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto , si vous êtes intéressé, les amis peuvent s'y référer
Le code clé est : #topmenu_keleyi_com{position:fixed;left:0px;right:0px;width:706px;margin-left : auto;margin-right :auto;}
Code complet ci-joint :
<!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>
<title>使position:fixed的p居中-柯乐义</title>
<style type="text/css">
#topmenu_keleyi_com{position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto;top:100px;height:50px;background-color:Red;}
#topmenu_keleyi_com li{float:left;
list-style:none;
margin-right:1px;
width:116px;
background-color:#e0f0e0;
}
#topmenu_keleyi_com ul{ margin:0px;padding:0px;}
body{margin:0px;}
</style>
</head>
<body>
<p id="topmenu_keleyi_com">
<ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a></li>
<li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a></li>
<li><a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li>
<li><a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li>
<li><a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a></li>
<li><a href="http://www.keleyi.com/" target="_blank">首页</a></li></ul>
position:fixed的p的居中效果,改变页面的宽度看看。
</p>
</body>
</html>
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. .Pour plus de contenu connexe, veuillez prêter attention à PHP Chinese net !
Recommandations associées :
Analyse du flotteur et de la position CSS
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!