Центрировать div в CSS

Я пытаюсь центрировать newsslider (в нижнем контейнере div) на этой странице:

http://www.luukratief-design.nl/dump/parallax/index.html

У меня уже есть text-align: center;

Тем не менее, это не работает.

Какие-либо предложения?


html css center
person Luuk    schedule 17.02.2010    source источник
comment
Я голосую за то, чтобы закрыть этот вопрос как не по теме, потому что вопрос только по ссылке, а ссылка мертва!   -  person    schedule 28.12.2015

Ответы (10)


arrow_upward
66
arrow_downward

text-align: center; центрирует только встроенное содержимое элемента, но не сам элемент.

Если это элемент block (div есть), вам нужно установить margin: 0 auto;, иначе, если это встроенный элемент , вам нужно вместо этого установить text-align: center; в его родительском элементе.

margin: 0 auto; установит верхнее и нижнее поле на 0, а левое и правое поле на auto (того же размера), так что он автоматически окажется в центре. Это работает только в том случае, если у рассматриваемого блочного элемента есть известный width (фиксированный или относительный), иначе он не может определить, где начать и где закончить.

person BalusC    schedule 17.02.2010
comment
и вам, возможно, также придется указать ширину div. - person Dave Markle; 17.02.2010
comment
Да, вам действительно нужно указать ширину блочного элемента, я отредактировал ее. - person BalusC; 17.02.2010
comment
IIRC, некоторые старые версии IE не распознают auto значения полей, но они будут (ошибочно) использовать text-align для центрирования элементов блока, поэтому используйте оба, если можете. - person Tim Yates; 17.02.2010
comment
@T. Йетс: Никто не использует IE5 или старше (читайте: он отлично работает в IE6, который считается абсолютным минимумом, который вы (вероятно) хотели бы поддерживать). - person BalusC; 17.02.2010
comment
он работает в Chrome? потому что в моем Chrome текст внутри моего div не выравнивается по центру. - person Bakhtiyor; 10.06.2010
comment
@Bak: для этого тебе действительно нужен text-align: center. Просто задайте новый вопрос, если вас заедает. - person BalusC; 10.06.2010
comment
text-align: center; отлично работает с inline-block элементами. Это единственный ответ, который сработал для меня - person dspacejs; 19.10.2015
comment
Вам также может понадобиться float: none;. - person intrepidis; 23.10.2020
comment
@intrepidis: нет. - person BalusC; 23.10.2020
comment
@BalusC Ага. У нас это не сработало, если мы не добавили float: none;. Моя компания до сих пор использует IE 11 в некоторых кругах. - person intrepidis; 23.10.2020
comment
@intrepidis: это необходимо только в том случае, если float унаследован от родителя, который (неправильно) установил для него значение, отличное от none. Если этого изначально не было, значит, в этом нет необходимости. Другими словами, по умолчанию он вообще не нужен. - person BalusC; 23.10.2020

arrow_upward
5
arrow_downward

text-align не следует использовать для центрирования блочного элемента. (кроме IE6, но это ошибка)

Вам нужно исправить ширину блока, затем использовать margin: 0 auto;

#block
{
   width: 200px;
   border: 1px solid red;
   margin: 0 auto;
}

и

<div id="#block">Some text... Lorem ipsum</div>
person Boris Guéry    schedule 17.02.2010

arrow_upward
4
arrow_downward

В одну сторону:

<div align="center">you content</div>

Способ лучше:

<div id="myDiv">you content</div>

CSS для myDIV:

#myDiv{
margin:0px auto;
}
person ant    schedule 17.02.2010

arrow_upward
2
arrow_downward

При условии, что ширина установлена, и вы вводите правильный DOCTYPE,

Попробуй это:

 Margin-left: auto;
 Margin-right: auto;

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

person Community    schedule 18.09.2012
comment
Для наглядности разработчиков используйте только 'margin: 0 auto;' - person codeWithMe; 08.11.2018

arrow_upward
1
arrow_downward

добавлять

margin:auto;
person John Boker    schedule 17.02.2010

arrow_upward
1
arrow_downward

я всегда использую

<div align="center">Some contents......</div>
person Ashok    schedule 17.02.2010
comment
Я подтверждаю, что это работает с Firefox (v54), Chrome (v58) и Safari (v10). - person Ricky Dam; 21.06.2017

arrow_upward
1
arrow_downward

Используйте text-align: center для контейнера, display: inline-block для div-оболочки и display: inline для div содержимого для горизонтального центрирования содержимого с неопределенной шириной в браузерах:

    <!doctype html>
    <html lang="en">
    <head>
      <style type="text/css">

    /* Use inline-block for the wrapper */
    .wrapper { display: inline-block; }

    .content { display:inline; }

    .container { text-align:center; }

    /*Media query for IE7 and under*/

    @media,
      {
      .wrapper { display:inline; }
      }
        </style>

        <title>Horizontal Centering Test</title>
    </head>

    <body>

      <div class="container">
        <div class="content">
            <div class="wrapper">
              test text
            </div>
        </div>
      </div>
    </body>
    </html>
person Paul Sweatte    schedule 20.06.2012

arrow_upward
0
arrow_downward

Попробуйте добавить это к стилю.

margin-left: auto;
person Steve Danner    schedule 17.02.2010

arrow_upward
0
arrow_downward

Попробуй это:

#bottombox {
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0;
float:none;
height:137px;
margin:0 auto;
padding-top:14px;
width:296px;
}

Это должно быть центром div в нижнем колонтитуле.

person tahdhaze09    schedule 17.02.2010

arrow_upward
-3
arrow_downward

Создайте таблицу с одной строкой и тремя столбцами, установите ширину слева и справа на 100% и вуаля, средний центр будет автоматически центрирован.

person alemjerus    schedule 17.02.2010
comment
Это правильный ответ. Да, это непрактично в большинстве сценариев. ОДНАКО, все еще в силе. Пожалуйста, прекратите голосовать против действительного ответа только потому, что вам «так хочется». - person Jack Giffin; 27.03.2017