11
divのx位置をページ中央の右側に配置しようとしています。したがって、divは中心に相対的です。中心からのオフセットdiv
はこれまでのところ、私は
margin:0 auto;
margin-left:20px;
のような愚かな何かをしようとしたしかし、あなたはそれが動作しません知っているブラウザでそれをテストする必要はありません。
ご協力いただきありがとうございます。
A
答えて
15
私は2つのdiv要素、内部のものを使用して試してみました別のこのようなもの：
<div class="outer">
<div class="inner">Hello, world!</div>
</div>
.outer {
width: 1px; /* Or zero, or something very small */
margin: auto;
overflow: visible;
background: red; /* A color just for debug */
}
.inner {
margin-left: 20px;
background: yellow; /* A color just for debug */
width: 100px; /* Depending on the desired effect, width might be needed */
}
this example live at jsfiddleを参照してください。
外側divは、水平この質問/回答の通り中心されるであろう：そしてHow to horizontally center a <div> in another <div>?
、内側差分だけマージンを使用して、右に20ピクセル移動します。
widthをautoとしておくと、幅がゼロになることがあります。希望する幅にならないことがあります。
1
あなたは（余裕をもっ：オート）のdivを中心可能性を右にして（別のdivで）コンテンツを移動させるXピクセル：
margin-right:-20px
またはちょうどあなた囲むdiv要素は、40個のピクセル長くすると、あなたを揃えます右
5
にテキストあなたが中心に対して配置したいdiv要素の幅を知っているなら、あなたはこのような何かを行うことができます：
http://jsfiddle.net/UnsungHero97/Fg9n6/
HTML
<div id="box">off center</div>
<div id="box2">center</div>
CSS
#box {
width: 300px;
height: 100px;
border: 1px solid magenta;
margin: 0 auto;
text-align: center;
line-height: 100px;
position: relative;
left: 20px;
}
#box2 {
width: 300px;
height: 100px;
border: 1px solid skyblue;
margin: 0 auto;
text-align: center;
line-height: 100px;
}
結果
0
使用このコード：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
#outer {
position:relative;
width:300px;
height:100px;
background-color:#000000;
}
#inner {
position:absolute;
left:50%;
width:100px;
height:100px;
margin-left:-30px; /*Basic Margin Left-Half of Width=20px-50px=-30px*/
background-color:#ff0000;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
結果：これは、すべてのブートストラップ用
1
<code>
<div class="col-xs-12 (or whatever the div is)" style="position:relative;left:20px;text-align:center">Your text here</div>
</code>
作品、HTML5（とでもMediaWikiの地獄で）【選択トリックがあります「位置：関連」
あなたはCSSと同じことをすることができます。
<code>
.whateva {
position:relative;
left:20px;
text-align:center;
}
</code>
関連する問題
バンドルありがとう、素晴らしい作品です。 –
+1に感謝します。これにより、異なるスクリーン解像度でポップアップ情報のバブルの位置を正規化する際に、本当の問題がなくなりました。 –
これは、コンテンツを右に移動する必要がある場合にのみ機能するため、左に移動する場合は機能しません。負の左マージンを使用して修正することはできますが、これはスクロールを中断させます。 – Vallentin