it-roy-ru.com

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

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

48
Chendur Pandian

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

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

с:

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

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

73
cletus

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

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

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

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

22
user1656346

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

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

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

11
DigitalRoss

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

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

плавающие 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;
}
5
T. Philipp

Один из моих веб-сайтов использует 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");
4
chiliNUT

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

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

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

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

1
adarsh mohan
<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.

0
prospector

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

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

0
Quentin

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

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

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

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