web-dev-qa-db-ja.com

divを中央に揃える

divを中央に浮かせたい。出来ますか？ text-align: centerはIEで動作していません。

htmlcssmargincenter-align
48
ACP

中央にフロート自体はありません。ブロック要素を別の要素の中央に配置するには、次の操作を行います。

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

で：

#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }

これで、テキストは（左または右にフロートがある場合のように）回り込みませんが、先ほど言ったように、フロートの中心はありません。

76
cletus

これはいつも私にとってはうまくいきました。

DIVの固定幅と適切なDOCTYPEを設定した場合、これを試してください

div {        
  margin-left:auto;
  margin-right:auto;
}

お役に立てれば。

23
user1656346

このための通常のテクニックはmargin:autoです

ただし、古いIEはこれを理解しないため、通常はtext-align: centerを外側の収容要素に追加します。あなたはそれがうまくいくとは思わないでしょうが、autoを無視する同じIEはまた、物事がうまくいくように、レベルの内側の要素をブロックするためにテキスト整列センターを間違って適用します。

そして、これは実際に実際のフロートを行いません。

11
DigitalRoss

次の解決策は私のために働いた。

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
5
Bikram Shrestha

display：inline-blockとtext-align：centerの組み合わせにより、フローティングdivが中央に「機能」します。

このウィンドウのサイズを変更して、外側のdivの幅を変更してみてください jsfiddle

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

とCSS：

.outer {
    text-align:center;
    width: 50%;
    background-color:lightgray;
}

.block {
    width: 50px;
    height: 50px;
    border: 1px solid Lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;
}
5
T. Philipp

私のWebサイトの1つには、サイズが可変のdivが含まれており、事前にそれを知ることはできません。ネストされた2つのdivを持つ外側のdivです。外側のdivは、コンテンツである最初のネストされたdivと同じ幅で、コンテンツのすぐ下にあるネストされた2番目のdivはキャプションです。幅がわからないため、jQueryを使用して適宜調整します。

だから私のHTMLはこれです

<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>

そして、私はこのようにjQueryのキャプションを中央に配置します

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
4
chiliNUT

「スペーサー」divを使用して、中央に配置するdivを囲みます。流体設計に最適です。スペーサーの高さを必ず確認してください。そうしないと、スペーサーが機能しません。

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
3
Huuu

これは私のために働いた..

div.className {
display: inline-block;
margin: auto;
}
2
zeah

これはあなたを助けることができる..：D

div#outer {
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;
}
div#inner {
  border:solid 5px green;
}
<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>
1
adarsh mohan
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

背景のdivを最大幅にフロートし、その内部に透明でないdivを設定し、margin autoを使用して中央に配置します。

0
prospector

いいえ、そうではありません。

コンテンツを要素の右側（float: left）または要素の左側（float: right）にバブルすることができます。コンテンツを両側にバブルすることはできません。

0
Quentin

これはうまく機能します

width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space

これは、適応レイアウトでもうまくサイズ変更されます。

CSSの例は次のとおりです。

.centered-div {
   position:fixed;
   background-color:#fff;
   text-align:center;
   width:40%;
   right:0;
   margin-right:30%;
}
0
onux

これは私のために働いた。

ページに順序なしリストを2回追加しました。 1つのdiv class = "menu" id = "vertical"中央に配置するもう1つのdiv class = "menu" id = "horizo​​ntal"です。リストは左にフロートされていたため、中央に配置するために内部divが必要でした。下記参照。

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

.menu#horizontal { display: block;  float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
0
Harry The Mad Lurker