ボックスとその内容をCSSの中央に配置するにはどうすればいいですか？

私は他の答えのいくつかを見てきましたが、私の特定のケースでは働かせられませんでした。私は単純化し、以下のコードブロック全体を含めました。基本的には、テキストは青いボックスに表示されます。私はどのようにボックスを中央に置くかを知りたい。ボックスとその内容をCSSの中央に配置するにはどうすればいいですか？

<!DOCTYPE html> 

<html> 
<head> 
    <style type="text/css"><!-- 
#content { 
width:500px; 
padding: 10px 10px 10px; 
background-color: #D1ECFF; 
position: relative; 
border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
} 
--></style> 
</head> 
<body> 

<div id="content"> 

    <h2>Create</h2> 

</div> 
</body> 
</html>

出典

2012-01-22 deltanovember

h2のスタイルはどこにありますか？「青いボックス」を定義するスタイルはどこですか？あなたの質問に答えるために、各要素に**固定**または**可変**高さと幅があるかどうかを知る必要があります。これらの詳細がなければ、あなたの質問は非常に曖昧であり、答えるのが難しいだけでなく、同じ問題を持つ他の人にとってはあまり役立たないでしょう。 –

#contentは幅を持っているので、あなたはautoに左右のマージンを設定することができます。これは要素を親の中央に配置します。コードmargin: 0 auto;の短いビットは、上下のマージンを0に設定し、左右をautoに設定します。

http://jsfiddle.net/vL5r2/

#content { 
    margin: 0 auto; 
    width:500px; 
    ...

出典

2012-01-22 04:19:49 mrtsherman

あなたはthis jsfiddleに見られるように水平にあなたは絶対位置と負のマージンでそれを行うことができ、両方の垂直ボックスとその内容を中心にしたい場合。

出典

2012-01-22 05:38:45 magicalex

ボックスとその内容をCSSの中央に配置するにはどうすればいいですか？

答えて

関連する問題