Вёрстка: блоки по центру

Фоновая картинка по центру

Сделать это можно многими способами, о них было написано ранее

Сейчас рассмотрен частный случай: при уменьшении размера экрана блоки равномерно смещаются вниз.

1 2 3 4 5 6

<div id="raz">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

<style>
#raz {
  text-align: center;
  border: solid #ccc;
}
#raz span {
  display: inline-block;
  max-width: 100%;
  width: 10em;
  margin: .5em; /* при сужении окна браузера от блока до края родителя присутствует отступ слева и справа */
  word-wrap: break-word;
  background: green;
  vertical-align: top;
}
#raz span:empty { /* убрать пустой элемент из потока */
  display: none;
}
</style>

Пример: месяца в календаре «Как рассчитать сколько осталось до Дня Рождения» выравнены подобным образом, только вместо

#raz span {
  display: inline-block;
}

использовано

#raz table {
 display: inline-table;
}

Отступы от края родителя до блоков можно регулировать.

1 2 3 4 5 6

<div id="raz1">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

<style>
#raz1 {
  text-align: center;
  border: solid #ccc;
  word-spacing: 1em; /* при сужении окна браузера от блока до края родителя отсутствует отступ слева и справа */
}
#raz1 span {
  display: inline-block;
  max-width: 100%;
  width: 10em;
  margin: .5em 0;
  word-spacing: normal; /* внутри блоков расстояние между словами сделать нормальным */
  word-wrap: break-word;
  background: green;
  vertical-align: top;
}
#raz1 span:empty { /* убрать пустой элемент из потока */
  display: none;
}
</style>

наверх ↑

14 комментариев:

seoonly.ru: Спасибо!
Aleksandr P: Может подскажите как в bloggere разместить заглавие поста по центру?
NMitra: Недоблогер? В CSS добавьте:

#Header1_headerimg {margin: 0 auto;}
Aleksandr P: ок спасибо!
Aleksandr P: Ого не все так просто, можно чайнику поподробнее?
NMitra: Посмотрите тут http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css
Aleksandr P: Посмотрел к сожалению у меня отсутствует фрагмент "]]>. "
NMitra: Тогда перед
</style>
Aleksandr P: И так? у меня при добавлении в CSS кода, ( в дизайнере шаблонов) получилось шапку фона сместить по центру. Это тоже супер, давно хотел. Но Вот заголовок сообщения не получается.Нигде стиль не прописан ищу через Ctrl+F
NMitra: h3.post-title {
text-align: center;
}
Aleksandr P: Супер!!!!!!!!!! Спасибо большое!!!!!!!
Ульяна Михайлова: Здравствуйте! Скажите, пожалуйста, а к li такой способ можно применять?
NMitra: Здравствуйте, можно, только закрывать li нужно

<ol id="raz1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>

и если необходимо сбросить стили

#raz1,
#raz1 li {
padding: 0;
}

Образец https://jsfiddle.net/NMitra/7u3scjc2/
Ульяна Михайлова: Спасибо!

Вёрстка: блоки по центру | CSS

14 комментариев: