かわせ <div> 中(横幅)のページの[複製]
質問
この質問に答えはこちら
- どのように水平にセンター <div>? 101回答
してい div
タグ width
設定 800ピクセル.がブラウザの幅より大きい 800ピクセル, でんを伸ばしての div
, もので持参しの中に表示されます。
解決
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
他のヒント
position: absolute
、次いでtop:50%
とleft:50%
は次に、すなわち、DIVの高さの負-100シフトをmargin-top
を添加することにより、スクリーンの垂直中心に上端、および水平中心に左端を配置すること100によって同様margin-left
ための上記。これは、ページの中央に正確にdiv
を取得します。
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}
<div id="outPopUp"></div>
近代 Flexbox ソリューションには、のように/から2015年までに justify-content: center
は、親要素を合わせの内容には、センターです。
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
出力
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>
ということでしょうかいセンターでは、垂直、水平の?すごく特定の
height
800ピクセルを決めたのな伸びを低くするためにwidth
による...中央に水平に利用できます
margin: auto;
属性。また、いくことをbody
やhtml
要素がないmarginやpadding:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
次のように、それはまた、あなたがそれをしなければならないのInternet Explorer 6で正しく動作するようにするには:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
また、このようにそれを使用することができます:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
単純にcenter
タグの後body
タグを使用し、center
が終了する直前にbody
タグを終了します:
<body>
<center>
... Your code here ...
</center>
</body>
これは、私が試してみましたすべてのブラウザで私のために働いています。
この簡単フレックスコンテナを介して達成することができる。
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
あなたは(セット幅を持っているはずである)を中心としたいのdivにこのクラスを追加します。
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
あるいは、このように、あなたのdivクラスに余裕のものを追加します:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
の本部はの
コンテンツのサイズを固定することなく、親の内部に垂直方向と水平方向中心の ここでは、このページののを持つ素敵な概要ですいくつかのソリューションは、あまりにも多くのコードはここに共有するが、それが可能であるかを示して...
私は個人の このソリューションののと同じように有名なのは、ほとんどの-50%のトリックを翻訳変換します。これは、固定(%またはピクセル)と、未定義の高さと、あなたの要素の幅の両方に適しています。
コードは同じくらい簡単です。
HTMLます:
<div class="center"><div>
CSSます:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* for IE 9 */
-webkit-transform: translate(-50%, -50%); /* for Safari */
/* optional size in px or %: */
width: 100px;
height: 100px;
}
をご利用 CSSフレックス性: http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
その他の既存のドから古いコードするのを防ぐための部のページを中心にL&R:
- その他のクラスに隠された外部スタイルシートのリンクです。
- その他のクラスに埋め込まないことから
img
(年齢により外部CSS印刷形式たものです。 - 凡例のコードIdおよび/または授業に反する
div
クラスです。
を中心としないを指定する部門幅:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
このようなもの <center>
タグは、以下の場合を除
- すべての直接インライン領の要素(例えば.
<h1>
)<center>
も配置されたセンター - インライン-ブロック要素で異なったサイズ(comapredる
display:block
設定によりブラウザのデフォルト
水平および垂直justify-content
を整列させるために使用align-items
及びdiv
https://developer.mozilla.org/de/docs/ウェブ/ CSS /正当化し、コンテンツの https://developer.mozilla.org/en/docs/Web/CSS / ALIGN-アイテムの
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
、私が知っている唯一の可能な理由は、マージンを計算することである。
ここでは一例であります:
HTML
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
だから、#supercontainer
はあなたの"whole page"
であり、そのwidth
は1200px
です。
#middlecontainer
は、あなたのサイトのコンテンツにdiv
されます。それはwidth
102px
です。場合には、コンテンツのwidth
が知られている、あなたは2ページのサイズを分割し、その結果からコンテンツのwidth
の半分を減算する必要があります。
2分の1200 - (2分の102)= 549;
はい、私はまた、これはのデア・グロッセのCSSで失敗していることを見ている。
body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
「幅:100%」「ボディ」タグのは一例のためのものです。実際のプロジェクトでは、このプロパティを削除することがあります。
シンプル http://jsfiddle.net/8pd4qx5r/する
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
.content {
margin: 0 auto;
width: 260px;
text-align: center;
background: pink;
}
のdivボックスをセンタリングするため、以下のコードを使用します:
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}
<div class="box-content">
</div>
これはまた、Internet Explorerで動作しますが、自動マージンはありません。
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
<parent>
<child>
</child>
</parent>
parent {
position: relative
}
child {
position: absolute,
left: 50%,
transform: translateX(-50%)
}
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
あなたが垂直位置を変更したい場合は、、250の値を変更すると、あなたはあなたの必要性に従ってコンテンツを手配することができます。幅および他のパラメータを与える必要はありません。
は、唯一のマージンがあなたを救うことができます。他に何もありません。 ブートストラップのようなフレームワークを使用していないとき、私はいつもそれに直面しています。
私の場合、電話の画面サイズは不明であり、ここには何と書いてしまった。
HTML
<div class="loadingImg"></div>
CSS
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border: 0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JavaScript 前の提示が必要となりますこのDIV)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
は、いくつかの理由について、前回の回答のどれも本当に私のために働いていません。これは私のために働いていたものですし、それは同様にブラウザ間で動作します。
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
}
- 横幅を取得しますにチェックを入れます。
- その証拠金残25%
- 作益権25%
このようにコンテンツのコンテナに入っています。
例:このコンテナwidth=800px;
<div class='container' width='device-width' id='updatedContent'>
<p id='myContent'></p>
<contents></contents>
<contents></contents>
</div>
if ($("#myContent").parent === $("updatedContent"))
{
$("#myContent").css({
'left': '-(device-width/0.25)px';
'right': '-(device-width/0.225)px';
});
}
.middle {
margin:0 auto;
text-align: center;
}
/ *それが中央にdiv要素をもたらします* /