Как горизонтально центрировать <div>? - PullRequest
Новая
       423

Как горизонтально центрировать <div>?

3967 голосов
/ 22 сентября 2008

Как я могу горизонтально центрировать <div> внутри другого <div> с помощью CSS? 

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Ответы [ 98 ]

0 голосов
/ 14 марта 2013

Центрирование: поля ширины авто

Это поле центрируется по горизонтали, устанавливая ширину его правого и левого полей в «Авто». Это предпочтительный способ выполнения горизонтального центрирования с помощью CSS, который очень хорошо работает в большинстве браузеров с поддержкой CSS 2. К сожалению, Internet Explorer 5 / Windows не отвечает на этот метод - недостаток этого браузера, а не методика.

Существует простой обходной путь. (Пауза, пока вы боретесь с тошнотой, вызванной этим словом.) Готов? Internet Explorer 5 / Windows неправильно применяет атрибут CSS «text-align» к элементам уровня блока. Объявление «text-align: center» для содержащего элемента уровня блока (часто элемента BODY) горизонтально центрирует прямоугольник в Internet Explorer 5 / Windows.

У этого обходного пути есть побочный эффект: атрибут CSS "text-align" наследуется, центрируя встроенный контент. Часто необходимо явно установить атрибут «выравнивание текста» для центрированного поля, чтобы противостоять эффектам обходного пути Internet Explorer 5 / Windows. Соответствующий CSS следует. 

body {
    margin: 50px 0px;
    padding: 0px;
    text-align: center;
}

#Content {
    width: 500px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    border: 1px dashed #333;
    background-color: #EEE;
}

http://bluerobot.com/web/css/center1.html

0 голосов
/ 03 декабря 2013 
<center>

Я избалован самым простым из известных центров? 

</center>
0 голосов
/ 30 декабря 2015

Я делюсь этим ответом для дизайнеров, которые хотят выровнять свой контент по горизонтали и вертикали. Или вы можете сказать, в центре веб-страницы. Пожалуйста, перейдите на этот сайт , чтобы загрузить файл.

Код CSS 

.ver-hor-div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
0 голосов
/ 09 декабря 2016 
.outer {
    text-align: center;
    width: 100%
}
0 голосов
/ 14 января 2017

Добавьте CSS к своему внутреннему div. Установите margin: 0 auto и установите его ширину менее 100%, которая является шириной внешнего делителя. 

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>

Это даст желаемый результат.

0 голосов
/ 31 января 2017 
<div id="outer" style="width:100%">  
  <div id="inner" style="text-align:center">Foo foo</div>
</div>
0 голосов
/ 26 июля 2017

Вы можете воспользоваться ссылкой https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview

.outer{
      display: table;
      width: 100%;
      height: 100%;
}
.inner {
    vertical-align: middle;
}

См. https://v4 -alpha.getbootstrap.com / examples / cover /

0 голосов
/ 15 июля 2018 

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
    <style>
    .outer{
          text-align: center;
           }
    .inner{
          width: 500px; 
          margin: 0 auto; 
          background: brown; 
          color: red;
    }
 
</style>

  </head>

  <body>

    <div class="outer">
      <div class="inner">This DIV is centered</div>
    </div>

  </body>
</html>

плз попробуйте это будет работать без тега html center

Страница:
...