2013-08-08 11 views
7

divの拡張を防ぐにはどうすればよいですか?私は、要素を持つdivが利用可能なスペースの100%を取らず、子供の持つ幅を持たないようにしたい。私は親divを水平にセンタリングするためにこれが必要です。そのトリックは、子要素がfloat:leftまたはdiplay:inline-blockとfluid widthを共有する必要があるため、子要素の行がほとんどないことがあります。css:divの幅が利用可能な幅に拡大されないようにする

レスポンシブデザインを破るので、各行を独自のdivにラップすることはできません。

+0

いくつかの可能性があります: '表示:インラインblock'が、このために良いですが、([IE7ハック](http://stackoverflow.com/a/6545033/870729を意識します)) –

+0

'display:inline-block'を親に設定し、コンテナで囲みます' text-align:center; ' –

+0

これは小さな問題のように見えますので、HTMLを表示すると、あなたが直面している挑戦。 – isherwood

答えて

0

display: inline-bockを試してみましたか? DIVはブロック要素なので100%の幅を占めます。

+11

これはコメントです。 – defaultNINJA

+0

これはdivを崩壊させますが、(簡単に)中央に配置されることはありません。 –

6

使用する必要がありますdisplay: table;これは内容のサイズに縮小され、指定された幅を割り当てることなく、中央揃えと位置指定が可能です。

DEMO http://jsfiddle.net/kevinPHPkevin/9VRzM/

+0

float:leftまたはdisplay:inline-blockを子要素に設定しようとすると、問題が発生します。 – vlad

+0

@vlad実際には 'float:left'と' display:inline-block'を設定しようとしましたが、問題はありません。このような状況では、親コンテナは可能な限り拡張して、子要素が使用可能な幅を埋めるようにします。親コンテナのmaximum-widthプロパティを使用して幅を制限することができます。 –

+0

はまだテキストが多いときに展開されます – IHeartAndroid

0

あなたが本当に親divは(あなたが達成しようとしているものに基づいて、どのような理由のために)その子要素の周りに崩壊する場合、あなたはその後divこと、そしてベクターの@中心にしたいです答えは上にあり、display: tablemargin: 0 autoを使用してください。

divは、子供をセンターに入れようとしているコンテナの全幅まで拡大しても問題ない場合は、状況に応じて少なくとも2つ以上のオプションがあります。

text-align: centerを使用できます。

.content { 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: thin; 
 
} 
 

 
.content span { 
 
    display: inline; 
 
    border-style: solid; 
 
    border-width: thin; 
 
}
<div class="content"> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div>

はまた、あなたはもちろん、サポートしているブラウザの互換性のレベルに応じて、justify-content: centerdisplay: flex以降を使用することができます。

.content { 
 
    display: flex; 
 
    justify-content: center; 
 
    border-style: solid; 
 
    border-width: thin; 
 
} 
 

 
.content div { 
 
    border-style: solid; 
 
    border-width: thin; 
 
}
<div class="content"> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div>

関連する問題