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

Question

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

Answer 1

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

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

с:

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

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

Answer 2

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

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

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

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

Answer 3

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

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

И это на самом деле не делает настоящего плавания.

Answer 4

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

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

Answer 5

с плавающей точкой в ​​центр "работает" с комбинацией отображения: 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;
}

Answer 6

На одном из моих сайтов есть 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");

Answer 7

Используйте "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>

Answer 8

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

div.className {
display: inline-block;
margin: auto;
}

Answer 9

это может вам помочь ..: 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>

Answer 10

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

Я включил неупорядоченный список на мою страницу дважды. Один 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; }