2010-12-15 9 views
10

私はページの中央にdivを配置し、そのdivの内容に合わせたいと思っています。どうやってやるの?センターのdivとfitの内容は?


私はdiv要素を中心

width: 1px; 
white-space: nowrap; 
margin: 0 auto; 

を試してみたが、その後のすべてのテキストは、その右側にあります。

+2

をお試しください:センター 'それはそれを中心に親です... –

+0

@Sime:答えとして投稿しているはずです....私はあなたにチェックマークを与えるだろう。編集:ああ...できました;) – mpen

答えて

13

はあなたのために、この作業を行います。http://vidasp.net/tinydemos/inline-centered-div.html

body { text-align:center; } 
div { display:inline-block; } 
+0

これは、ページ上のすべてを中央に配置します。 – Blindy

+0

@Blindyデモだけです。このページでは、OPはDIVの親要素のtext-align:centerを定義する必要があります(この場合はBODY要素にはなりません)。 –

+0

はい、はいです。私は余分なdivでそれを折り返して 'text-align:center'をそれに置きますが、内側のdivに' text-align:left'を置くだけです。 – mpen

0

テキストが原因幅の右にある...

display: inline-blockはdiv要素は、内容に合わせますが、その後margin: 0 auto;が動作していないよう:1pxの。より大きな幅を設定します。

+0

...はい、私は*理由*を理解していますが、「より大きな幅を設定する」が「適合コンテンツ」要件を満たしていません。 – mpen

0

これを行うための唯一の方法は、Javascriptのソリューションはさておき、それに幅を与え、autoにその左右のマージンを設定することです:

<div style="margin-left:auto;margin-right:auto;width=80%">...</div> 

他のすべてのソリューションはなり台無しあなたの内のテキストを。

+0

%幅ではなく、内容に合わせたい。 – mpen

3

を一般的に、あなたには、いくつかのテキストを中央揃えにしたい場合は、あなたが中心とtext-align: center;に設定されているコンテナにまたがるコンテナを利用するでしょう。

CSS:

#container { 
    text-align: center; 
} 

HTML: 私のテキストあなたは別の内側容器における色の背景やボーダー、スティックの目的のために、テキストの周囲サイズののコンテナをしたい場合は

CSS:

#container { 
    text-align: center; 
} 

#inner_div { 
    display: inline; 
    /*other styles here*/ 
} 

はHTML:

<div id="container"> 
    <div id="inner_div">my text</div> 
</div> 
0

あなたはそれ `インラインblock`作るならば、あなたは`テキスト整列を設定する必要があり、まあdisplay: table;

div { 
    display: table; 
    margin: 0 auto; 
} 
関連する問題