Comment centrer un DIV en utilisant l'attribut position:fixed-tutoriel CSS-php.cn

Comment centrer un DIV en utilisant l'attribut position:fixed

不言

Libérer： 2018-06-26 09:41:36

original

2883 Les gens l'ont consulté

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>

Copier après la connexion

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!