ホームページ >ウェブフロントエンド >htmlチュートリアル >div のコンテンツを上下左右の中央に配置するにはどうすればよいですか? _html/css_WEB-ITnose
div のコンテンツを上下左右の中央に配置するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:15:281365ブラウズ
以下に示すように、Web ページのレイアウト、つまり上 div、左 div、右 div、下 div が必要です。
しかし、右の div のコンテンツを右の div 全体の中央に配置したいのですが、どうすればこれを実現できますか?ありがとう。
index.html
--------------------------------------- ---- -----
1a88e4d9c06dde59a9bf2c8329dc1294
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
fc590b03f8a0a17aab9bed0ebc27f793
b2386ffb911b14667cb8f0f91ea547a7 左 2 列固定右適応幅 + 先頭 + 末尾 6e916e0f7d1e588d4f442bf645aedb2f
335060f4156211cc33c07b30dad41e7a
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
ada442393f9f941237cb0e496c17b0f5 ;
81213820ca3987413d3e8fe9d7a4c950 25f64f3fe53f082cb34aea85a4f22849これはサイドバーです
dbc8684c69b616dccdee2ec1ea67e092
8947ba377ef1b0e90d5baf349cc8ba1a 6-2BF9DB9DB5C8" 幅= "212" height="104" codebase="setup.exe"> コントロールのプロパティ"/ > これはフッターです16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
layout.css
--------------- ---------------------------- ---
body { font-family:Verdana; font-size:14px; margin:0 ;}
#container {margin:0 auto; width:100%;}
#header { height:100px; #9c6; マージン-ボトム: 5px;}
#mainContent { 高さ: 500px; マージン-ボトム: 5px;}
#サイドバー { フロート: 左; 高さ: #cf9;}
#コンテンツ{ margin-left:205px !重要; margin-left:202px; height:# ffa;}
#footer { height:#9c6;}
ディスカッションへの返信マージン左、マージン右、マージン上、マージン下を自動に設定します。
http://aliceui.com/vertical-horizoncal/
作者は、ブラウザのサイズに適応できる次のスタイルを試すことができます。
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <style> .right{ position: absolute; top: 50px; right: 0px; bottom: 50px; width: 300px; text-align: center; border: 1px solid blue; } .rightContent{ position: absolute; top: 50%; bottom: 50%; height: 20px; } </style> </head> <body> <div class="right"> <span class="rightContent">右DIV显示的内容</span> </div> </body></html> 水平方向の中央揃え text-align: center 垂直方向の中央揃え 内部のコンテンツの高さを手動で定義し、margin:auto を使用できます