web-dev-qa-db-ja.com

中心からのオフセットdiv

ページの中央の右側にdivx量のピクセルを配置しようとしています。したがって、divは中心を基準にしています。

これまでのところ、私は次のような愚かなことを試しました

margin:0 auto;
margin-left:20px;

しかし、それが機能しないことを知るためにブラウザでそれをテストする必要はありません。

助けてくれてありがとう。

csshtmlcss-position
11
Joseph Szymborski

2つのDIVを1つずつ使用してみます。このようなもの：

<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 */
}

この例はjsfiddleにあります を参照してください。

外側のdivは、この質問/回答に従って水平方向に中央揃えになります： <div>を別の<div>に水平方向に中央揃えする方法は？

次に、マージンを使用して、内側の差分を20ピクセル右に移動します。

widthをautoのままにすると、幅がゼロになり、希望どおりにならない可能性があることに注意してください。

16
Denilson Sá Maia

中心を基準にして配置する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;
}

結果

result

9
Hristo
<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地獄でも）で機能します。トリックは「POSITION：RELATIVE」です。

CSSと同じことができます。

<code>
.whateva {
  position:relative;
  left:20px;
  text-align:center;
}
</code>
1
Timothy Wolford II

Divを（margin：autoで）中央に配置し、コンテンツを（別のdivで）Xピクセル右に次のように移動できます。

   margin-right:-20px

または、囲んでいるdivを40ピクセル長くして、テキストを右揃えにします

1
marioBonales

このコードを使用してください：

<!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>

結果：
enter image description here

0
Touhid Rahman