Выровнять div в центр

Ответ 1

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

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

с:

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

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

Ответ 2

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

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

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

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

Ответ 3

Обычный метод для этого - margin:auto

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

И это фактически не делает реального плавания.

Ответ 4

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

Ответ 5

Один из моих сайтов включает в себя div, размер которого является переменным, и вы не будете знать его заранее. это внешний div с 2 вложенными 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");

Ответ 6

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

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

Ответ 7

Используйте разделители "spacer", чтобы окружить 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>

Ответ 8

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

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

Ответ 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>

Ответ 10

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

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

Ответ 11

<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 внутри, что не прозрачно, и центрируйте его с использованием автоматического поля.

Ответ 12

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

Ответ 13

это прекрасно работает

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%;
}

Ответ 14

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

Я дважды включил неупорядоченный список на свою страницу. Один div class= "menu" id = "vertical" другой, который должен быть центрирован, был div class= "menu" id = "horizontal". Поскольку список был перемещен слева, мне нужен внутренний 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; }