div のコンテンツを上下左右の中央に配置するにはどうすればよいですか? _html/css

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/

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

&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 までご連絡ください。