Невозможно центрировать div горизонтально, фиксированное положение

У меня есть div, который я хочу центрировать горизонтально внутри окна браузера без изменения вертикальной позиции. Вот мой div:

<div id="divErrorMessage" class="ErrorClientSide">
    <div class="ui-icon ui-icon-info" style="float: left; margin-right: 6px;"></div>
    <div id="divErrorMessageText" style="margin-left: 6px;margin-top: 2px;">{ERROR MESSAGE HERE}</div>
    <img src="./Images/Icons/tinyx.png" style="position: absolute; top: 4px; right:4px; cursor:pointer" onclick="closeErrorMessage();" />
</div>

И вот класс:

.ErrorClientSide {
  display: none;
  position: fixed;
  top: 4px;
  left: 370px;
  padding: 10px 25px 10px 25px;
  border-radius: 7px;
}

Примечание. Для краткости я удалил стили цвета и такие из класса выше.

Попробуйте здесь. Инструкции: Оставьте все поля пустыми и просто нажмите кнопку " Далее >>". Вы должны увидеть розовое сообщение об ошибке div вверху, в котором говорится: "Ошибка: все поля обязательны.", Но горизонтальное позиционирование отключено.

Проблема: я не могу divErrorMessage горизонтально в окне браузера. Я уверен, что position:fixed проблема, но если я удалю это, мой div исчезнет, и я не смогу его найти. left:370px явно проблема. Если я удалю это, div выравнивается слева от браузера, и я не могу найти способ его центрировать.

Вот мои единственные требования к позиции для этого div:

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

Если CSS не может сделать это легко, я был бы рад также решению jQuery, но я предполагаю, что это должно быть легко с CSS.

Важное примечание: сообщение об ошибке и большая часть содержимого находятся внутри iFrame.

+1
источник поделиться
6 ответов

Если абсолютно установленное поле ошибки не имеет фиксированной width, вы можете достичь горизонтального выравнивания комбинацией left: 50%; и transform: translateX(-50%); ,

Например:

.ErrorClientSide {
  position: fixed;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

Префикс поставщика опущен из-за краткости.


Стоит отметить, что преобразование translate поддерживается в IE9+. Для дальнейшего чтения вы можете обратиться к теме ниже:

+4
источник

он фактически находится вне формы, что означает, что он падает в DOM ниже формы, если позиция не фиксирована. Если вы не хотите его перемещать - вам понадобится отрицательная позиция позиционирования и такая же ширина:

.ErrorClientSide {
display: block;
position: relative;
top: -319px;
width: 300px;
margin: 0 auto;
}
0
источник

Поскольку ваша ошибка div использует фиксированную позицию, вы должны соответственно изменить ее left и margin-left позицию.

Предположим, что эта ошибка div будет иметь ширину 200px, вы можете настроить свой CSS со следующим изменением:

 .ErrorClientSide {
    left: 50%;
    margin-left: -100px;
 }

Ваш атрибут margin-left должен быть отрицанием половины вашей ширины div (например, если ваша ширина div равна 378px вместо 200px, вы должны использовать margin-left: -189px;).

0
источник

Допустим, ваш div имеет ширину: 100px, тогда вы можете сделать левый: 50%; margin-left: -50px;

.ErrorClientSide {
  display: none;
  position: fixed;
  top: 4px;
  width: 100px;
  left: 50%;
  margin-left: -50px;
}

В качестве альтернативы вы можете:

.ErrorClientSide {
  display: none;
  position: fixed;
  top: 4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

В этом центре вы находитесь внутри окна

0
источник

Удалите положение, сверху и слева и используйте край: 0 авто и ширина. Измените разметку, чтобы поместить divErrorMessage перед формой. Или оберните его абсолютной позицией div, а затем центрируйте ее внутри.

Но сначала, пожалуйста, не используйте <center> поскольку он устарел.

0
источник

Если вы хотите поместить DIV по вертикали и горизонтали, вы должны обернуть его в 3 div.

<div class="outer">
<div class="middle">
<div class="inner">

<h1>The Content</h1>

<p>Once upon a midnight dreary...</p>

</div>
</div>
</div>

CSS

.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.middle {
display: table-cell;
vertical-align: middle;
}

.inner {
margin-left: auto;
margin-right: auto; 
width: /*whatever width you want*/;
}

Я вытащил этот ответ из раздела "Как вертикально центрировать div для всех браузеров?

-2
источник

Посмотрите другие вопросы по меткам или Задайте вопрос