div中央に浮かせたい。出来ますか？text-align: centerIEで動作していません。
質問する
361238 次
14 に答える
82
中央に浮くフロート自体はありません。ブロック要素を別の要素の中央に配置する場合は、次のようにします。
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
と：
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
これで、テキストが折り返されることはありませんが（左または右のフロートの場合のように）、私が言ったように、フロートの中心はありません。
于 2009-11-16T07:20:58.490 に答える
25
これはいつも私のために働いてきました。
DIVに固定幅を設定し、適切なDOCTYPEを設定した場合は、これを試してください
div {
margin-left:auto;
margin-right:auto;
}
お役に立てれば。
于 2012-09-28T18:03:27.480 に答える
11
このための通常のテクニックはmargin:auto
ただし、古いIEはこれを理解しないため、通常text-align: center、外部の包含要素に追加します。それがうまくいくとは思わないでしょうが、無視する同じIEautoは、テキスト整列の中心をブロックレベルの内部要素に誤って適用して、うまくいくようにします。
そして、これは実際には実際のフロートを行いません。
于 2009-11-16T07:33:53.497 に答える
6
次の解決策は私のために働いた。
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
于 2013-10-07T07:02:22.053 に答える
5
中央にフローティングdivは、display：inline-blockとtext-align：centerの組み合わせで「機能」します。
このjsfiddleのウィンドウのサイズを変更して、外側のdivの幅を変更してみてください
<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;
}
于 2013-04-08T15:42:36.600 に答える
4
私のウェブサイトの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");
于 2013-02-18T02:00:08.703 に答える
3
「スペーサー」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>
于 2010-07-11T17:17:26.397 に答える
3
これは私のために働いた。
div.className {
display: inline-block;
margin: auto;
}
于 2015-08-05T20:24:51.063 に答える
1
これはあなたを助けるかもしれません..：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>于 2015-05-25T09:22:49.917 に答える
0
いいえ、そうではありません。
要素の右側（float: left）または要素の左側（）のいずれかにコンテンツバブルを設定できますfloat: right。両側にコンテンツバブルを作成するための規定はありません。
于 2009-11-16T07:46:25.187 に答える
0
<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を内側に設定し、マージン自動を使用して中央に配置します。
于 2012-09-02T20:55:42.467 に答える
0
これはうまく機能します
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%;
}
于 2014-12-03T23:28:00.533 に答える
0
これは私のために働いた。
順不同のリストを自分のページに2回含めました。中央に配置されるもう1つのdivclass= "menu" id="vertical"はdivclass= "menu" id="horizontal"でした。リストは左に浮かんでいたので、中央に配置するために内側の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; }
于 2015-02-10T22:46:01.033 に答える
-1
これを試してみてください、それは私を助けました：divをタグでラップします、問題はそれがdivのコンテンツも中央に配置することです（他にコーディングされていない場合）。お役に立てば幸いです:)
于 2014-02-23T00:11:09.113 に答える