Используя CSS, как мне переместить DIV влево от центральной позиции?

#html #css

#HTML #css

Вопрос:

Довольно стандартный способ горизонтального центрирования a DIV — это установить левое и правое поля auto равными .

Тем не менее, у меня есть DIV то, что я хочу, чтобы оно было в основном горизонтально центрировано, но я хочу немного подтолкнуть его влево.

Я попытался установить поля следующим образом:

 margin: 100px 60% 24px 40%;

… а также вот так:

 margin: 100px 40% 24px 60%;

… но оба привели к тому, что DIV был расположен дальше вправо.

Я попытался добавить дополнение к DIV , но это также перемещает его только вправо.

Короче говоря, кажется, что независимо от того, что я делаю, DIV перемещение вправо, а не влево по желанию.

Как мне DIV немного сдвинуть a влево от центра?

1. Не могли бы вы создать jsfiddle, пожалуйста?

2. Установите для поля значение auto, а затем margin-right отдельно

3. @EricLeschinski, пожалуйста, не исправляйте мой британский / канадский центр на американское написание center .

Ответ №1:

Другой способ справиться с этим — создать родительскую оболочку div. Где вы устанавливаете значение auto, чтобы родительский элемент был центрирован, но дочерний div затем начинается с центра, но перемещается вправо. См . скрипку http://jsfiddle.net/4H26W/1 /

HTML

 <div id="red">
    <div id="blue">Some text</div>
</div>

css

 #red {
    width: 1px; /* you could actually just change it to 0px */
    margin: 100px auto;
    background: red;
}
#blue {
    width: 200px;
    background: blue;
}

Затем, если вы хотите дополнительно оптимизировать положение дочернего div, вы можете просто добавить к нему несколько левых стилей

 position: relative; /* has to be position relative for left to work, or you could just do margin-left: -50px; too */
left: -50px;

http://jsfiddle.net/4H26W/2/

Ответ №2:

Поскольку вы отметили css3 свой вопрос, чтобы вы могли его использовать :

 margin: auto;
-webkit-transform: translateX(10px); /* 10px to left */
-moz-transform: translateX(10px); /* 10px to left */
-ms-transform: translateX(10px); /* 10px to left */
 transform: translateX(10px); /* 10px to left */

Ответ №3:

Оказывается, я смог сделать то, что мне нужно было сделать с плавающим разделением.

 .left,
.right {
    display: block;
    position: relative;
    margin-bottom: 2em;
    clear: both;
}

.left {
    float: left;
    margin-left: 20px;
}
.right {
    float: right;
    margin-right: 20px;
}

Ответ №4:

существует опция с выравниванием по тексту, отображением и отрицательным полем .

ДЕМОНСТРАЦИЯ

Тестовая база HTML :

 <div class="left">center on my left</div>
<hr/>
<div class="right">center on my right</div>
<hr/>
<div >center me</div>

База CSS:

 body {
  text-align:center;
  background:linear-gradient(to right,gray 50%,white 50%)
}
div {
  width:20%;/* whatever */
  display:inline-block;
  border:solid;
}
.left {
  margin-left:-20%;/* whatever */
}

.right {
  margin-right:-20%;/* whatever */
}

визуализация

Ответ №5:

Если вы установите margin-right или margin-left как отдельное правило после установки margin правила, вы все равно будете разочарованы, но не так сильно:

 <div id="first"></div>
<div id="second"></div>

div {
    height: 100px;
    width: 100px;
    border: 1px solid red;
    margin: 2em auto;
}

#second {
    margin-right: 42%;
}

Смотрите пример скрипки: http://jsfiddle.net/Q7EHX /

Ответ №6:

положение относительно.

 <div style="margin:100px auto 24px;
    position:relative;left:-30px;
    border:1px solid red;width:200px
">should be a little off-center</div>