コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > Position:fixed 属性を使用して DIV を中央に配置する方法

Position:fixed 属性を使用して DIV を中央に配置する方法

不言
リリース： 2018-06-26 09:41:36
オリジナル
2884 人が閲覧しました

position:fixed 属性を使用して div を中央に配置するためのキーコードは以下で共有されます:position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto、興味のある方は参考にしてください

キーコードは: #topmenu_keleyi_com{position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto;}
完全なコードを添付します : 

<!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>
ログイン後にコピー

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS float と位置の分析

以上がPosition:fixed 属性を使用して DIV を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
fixed position 中心
ソース：php.cn
前の記事：CSS3 を使用してマテリアル デザイン効果を実現する 次の記事：css3で実装された垂直セカンダリナビゲーション
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
スタイル付きコンポーネントでマップ関数を使用してデータを処理するにはどうすればよいでしょうか? マップ機能の使い方を練習中です。 jsonファイルを作成したので、map関数を使って各データを表示したいと思います。データは非常にうまく転送されます。しかし、問題は画像の表示方法で...
から 2024-03-30 18:06:00
0
1
378
React-chartjs-2.js を使用してドーナツ チャートにテキストを挿入するにはどうすればよいですか? グラフのタイトルが上部にあり、ラベルがドーナツ グラフの右側にある場合に、react-chartjs-2.js と Typescript を使用してドーナツ グラフにテキストを挿入...
から 2024-03-30 15:14:29
0
1
371
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート