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

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

WBOY

リリース： 2016-06-24 12:15:28

オリジナル

1322 人が閲覧しました

以下に示すように、Web ページのレイアウト、つまり上 div、左 div、右 div、下 div が必要です。

しかし、右の div のコンテンツを右の div 全体の中央に配置したいのですが、どうすればこれを実現できますか?ありがとう。

index.html
--------------------------------------- ---- -----

左 2 列固定右適応幅 + 先頭 + 末尾

;

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 を使用できます