Блог

Главная - Вопросы по программированию - поле 0 автоматически; не работает

поле 0 автоматически; не работает

#html #css #alignment #center

#HTML #css #выравнивание #центр

Вопрос:

Я пытаюсь настроить автоматический центр нескольких разделов, используя поле: 0 автоматически, но это не сработает. Я просмотрел весь сайт. Мои ширины установлены, я не использую значение с плавающей точкой и не пытаюсь использовать поле, я добавляю поле к правильному элементу. Но разделы по-прежнему не центрируются. Любая помощь была бы очень полезна… Заранее благодарю вас…. Код CSS приведен ниже…

 header {
  width: 100%;
  height: 60px;
  background: rgb(0, 0, 0);
}
section.Hero {
  width: 100%;
  height: 400px;
  background: rgb(200, 200, 200);
}
section.Features {
  width: 940px;
  height: 450px;
  background: rgb(150, 150, 150);
  margin: 0 auto;
}
section.Organize {
  width: 100%;
  height: 300px;
  background: rgb(200, 200, 200);
}
section.Share {
  width: 940px;
  height: 300px;
  background: rgb(150, 150, 150);
  margin: 0 auto;
}
section.Get {
  width: 100%;
  height: 100px;
  background: rgb(0, 0, 0);
}
footer {
  width: 100%;
  height: 60px;
  background: rgb(200, 200, 200);
}  
 <header class="Header">Header</header>

<section class="Hero">Hero</section>

<section class="Features">Features</section>

<section class="Organize">Organize</section>

<section class="Share">Share</section>

<section class="Get">Get</section>

<footer class="Footer">Footer</footer>

Комментарии:

1. где ваш HTML? и будет намного проще помочь, если вы предоставите рабочий пример (например, snippet или jsfiddle)

2. Вот ссылка на jsfiddle: jsfiddle.net/#amp;togetherjs=0fnig077zD

3. ваш код, похоже, работает как есть.

4. Согласно вашему фрагменту все работает так, как ожидалось…

5. Я согласен с другими… это работает отлично!

Ответ №1:

Встроенный блок покрывает всю строку (слева направо), поэтому поле слева и / или справа здесь не будет работать. Что вам нужно, так это блок, блок имеет границы слева и справа, поэтому на него могут влиять поля. Пример

 #stuff {
     display: block;
     margin: 0 auto;
}

Вы могли бы просто использовать это для того же эффекта.

 #stuff {
     text-align: center;
}

Ответ №2:

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

http://codepen.io/anon/pen/vXQZBA

Если вы хотите, чтобы текст в этих разделах располагался по центру, добавьте text-align: center; к ним правила CSS. Я сделал это в приведенном выше codepen.