div のコンテンツを上下左右の中央に配置するにはどうすればよいですか? _html/css_WEB-ITnose
Jun 24, 2016 pm 12:15 PM 以下に示すように、Web ページのレイアウト、つまり上 div、左 div、右 div、下 div が必要です。
しかし、右の div のコンテンツを右の div 全体の中央に配置したいのですが、どうすればこれを実現できますか?ありがとう。
index.html
--------------------------------------- ---- -----
<!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=gb2312" />
<title> 左 2 列固定右適応幅 + 先頭 + 末尾 </title>
<link href="layout.css" rel="stylesheet" type= "text/css" />
</head>
<body>
<div id="header"> ;
<div id="mainContent"> <div id="sidebar">これはサイドバーです
<-- 次の div のコンテンツを左、右に配置する方法、上下? -->
< MyDemo.ShowMessage()' value='コントロールと対話するために js を使用'/> 6-2BF9DB9DB5C8" 幅= "212" height="104" codebase="setup.exe"> コントロールのプロパティ"/ > これはフッターです</div>
</body>
</html>
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 を使用できます

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?
