Смещение div от центра

Я пытаюсь расположить div x количество пикселей справа от центра страницы. Следовательно, div будет относиться к центру.

До сих пор я пробовал что-то глупое, как

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

Но вам не нужно проверять, что в браузере известно, что это не сработает.

Заранее благодарим за помощь.

Ответ 1

Я бы попытался использовать два DIVs, один внутри другого. Что-то вроде этого:

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

Затем внутренний diff просто перемещается на 20 пикселей вправо с использованием поля.

Обратите внимание: если вы оставите width как auto, ширина будет равна нулю, и это может быть не то, что вы хотите.

Ответ 2

Если вы знаете ширину элемента 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;
}

Результат

Ответ 3

Вы можете центрировать div (с полем: авто) и перемещать содержимое (в другом div) X пикселей вправо с помощью:

   margin-right:-20px

Или просто увеличивайте размер вложений до 40 пикселей и выравнивайте текст вправо

Ответ 4

<code>
<div class="col-xs-12 (or whatever the div is)" style="position:relative;left:20px;text-align:center">Your text here</div>
</code>

Это работает для всех Bootstraps, html5 (и даже в прессе MediaWiki). Трюк - "ПОЗИЦИЯ: ОТНОСИТЕЛЬНО"

Вы можете сделать то же, что и CSS.

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

Ответ 5

Используйте этот код:

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

Результат: