ホームページ ウェブフロントエンド htmlチュートリアル div のコンテンツを上下左右の中央に配置するにはどうすればよいですか? _html/css_WEB-ITnose

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-horizo​​ncal/

作者は、ブラウザのサイズに適応できる次のスタイルを試すことができます。

&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;        &lt;title&gt;JSP Page&lt;/title&gt;        &lt;style&gt;            .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;            }        &lt;/style&gt;    &lt;/head&gt;    &lt;body&gt;        &lt;div class=&quot;right&quot;&gt;            &lt;span class=&quot;rightContent&quot;&gt;右DIV显示的内容&lt;/span&gt;        &lt;/div&gt;    &lt;/body&gt;&lt;/html&gt;
ログイン後にコピー


水平方向の中央揃え text-align: center 垂直方向の中央揃え 内部のコンテンツの高さを手動で定義し、margin:auto を使用できます

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

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

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

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

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

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;の目的は何ですか 要素?

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;の目的は何ですか 要素?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

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

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

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

See all articles