Выровняйте div по центру

Я хочу отпустить div в центр. Является ли это возможным? text-align: center не работает в IE.

Источник

14 ответов

Решение

Там нет плавать в центр как таковой. Если вы хотите центрировать элемент блока внутри другого, сделайте это:

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

с:

#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }

Теперь это не заставит текст обернуться вокруг него (как это было бы с поплавком влево или вправо), но, как я уже сказал: нет поплавкового центра.

Источник

Это всегда работало для меня.

При условии, что вы установили фиксированную ширину для вашего DIV и правильный DOCTYPE, попробуйте это

div {        
  margin-left:auto;
  margin-right:auto;
}

Надеюсь это поможет.

Источник

Обычная техника для этого margin:auto

Тем не менее, старый IE не делает этого, поэтому обычно добавляет text-align: center на внешний содержащий элемент. Вы не думаете, что это будет работать, но те же IE, которые игнорируют auto также неправильно применяет центр выравнивания текста, чтобы блокировать внутренние элементы уровня, чтобы все получилось.

И это на самом деле не делает реальное плавание.

Источник

Плавающие div в центр "работает" с комбинацией отображения:inline-block и text-align:center.

Попробуйте изменить ширину внешнего div, изменив размер окна этого jsfiddle

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

и CSS:

.outer {
    text-align:center;
    width: 50%;
    background-color:lightgray;
}

.block {
    width: 50px;
    height: 50px;
    border: 1px solid lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;
}
Источник

Следующее решение сработало для меня.

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
Источник

Один из моих веб-сайтов использует div, размер которого является переменным, и вы не узнаете об этом раньше времени. это внешний div с двумя вложенными элементами div, внешний div такой же ширины, как и первый вложенный элемент div, который является содержимым, а второй вложенный элемент div непосредственно под содержимым является заголовком, который должен быть центрирован. Поскольку ширина неизвестна, я использую jQuery для соответствующей настройки.

так что мой HTML это

<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>

а затем я центрую подписи в jQuery, как это

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Источник

Это сработало для меня..

div.className {
display: inline-block;
margin: auto;
}
Источник

Используйте "spacer" div, чтобы окружить div, который вы хотите центрировать. Лучше всего работает с плавным дизайном. Обязательно укажите проставки высотой, иначе они не будут работать.

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
Источник

Это может помочь вам..:D

div#outer {
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;
}
div#inner {
  border:solid 5px green;
}
<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>

Источник

Это работает хорошо

width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space

Это изменяет размеры с адаптивными макетами также..

Пример CSS будет:

.centered-div {
   position:fixed;
   background-color:#fff;
   text-align:center;
   width:40%;
   right:0;
   margin-right:30%;
}
Источник 
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

Переместите элемент div в фоновом режиме на максимальную ширину, установите элемент div внутри, который не является прозрачным, и отцентрируйте его с помощью поля auto.

Источник

Это сработало для меня.

Я включил неупорядоченный список на моей странице дважды. Один div class = "menu" id = "vertical", другой для центрирования был div class = "menu" id = "горизонтальный". Поскольку список был перемещен влево, мне был нужен внутренний div для его центрирования. Увидеть ниже.

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

.menu#horizontal { display: block;  float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Источник

Нет, это не так.

Вы можете иметь пузырек контента справа от элемента (float: left) или слева от элемента (float: right), не предусмотрено, чтобы содержимое всплыло с обеих сторон.

Источник

Попробуйте это, мне помогло: оберните div в теги, проблема в том, что он также будет центрировать содержимое div (если не закодировано иначе). Надеюсь, это поможет:)

Источник
Другие вопросы по тегам