<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как выравнять по центру блок переменной ширины.

Как выравнять по центру блок переменной ширины.

Всем привет! В этой статье я расскажу, как выравнивать по центру блоки, чья ширина может изменяться динамически.

Мы уже знаем, как выравнять элемент, ширина которого нам известна. Нужно просто добавить margin: 0 auto; Однако если мы не знаем ширину элемента, его свойство width, соответственно, будет отсутствовать, и этот способ уже, увы, не сработает. Как поступать в таких случаях? Давайте узнаем.

Хорошим примером будет блок постраничной навигации. Он может содержать в себе ссылки на 3 страницы, 10 страниц и т.д. Мы не можем задать ему какую-то одну ширину. Давайте сверстаем такой блок.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Navigation</title>
</head>
<body>
  <div class="pagination">
   <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
   </ul>
  </div>
</body>
</html>

Теперь зададим стили.

#pagination ul {
  margin: 0 auto;
  overflow: hidden;
  display: table;
}

#pagination ul li {
  float: left;
  border: 1px solid #ccc;
  padding: 5px 8px;
  margin-right: 3px;
}

Т.е. все, что вам нужно сделать, это добавить блоку display: table; Почему это работает? Как вы знаете, таблицы не занимают 100% ширину, их ширина вычисляется в зависимости от контента, поэтому браузер будет ужимать блок до тех размеров, которые нужны контенту, и, таким образом, он будет знать его ширину и сможет выравнять блок по центру через обычный margin: 0 auto; Спасибо за внимание.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (10):

Mak1920 Mak1920 29.01.2015 22:43:32

Почему статьи в последнее время такие редкие?

Ответить

gemiks gemiks 01.02.2015 13:13:09

Как говорят для поисковой оптимизации.

Ответить

ivbutusov ivbutusov 12.02.2015 00:40:24

Да для ширины не так трудно сделать. Есть ещё способ с display: inline-block и у родительского элемента text-align: center - тоже работает. А вот для переменной высоты как сделать... Я имею в виду как просто сделать, без громоздких скриптов с обсчётами всех сторон. Желательно в чистом CSS. Вот это я бы очень хотел знать...

Ответить

php_programmer php_programmer 13.02.2015 20:16:39

Если я вас правильно понял http://goo.gl/vZjDag

Ответить

ivbutusov ivbutusov 14.02.2015 02:07:45

Да, похоже. Но видимо я что-то делаю не так, и у меня этот метод так и не заработал... Пытался завести в Chrome / Yandex.

Ответить

php_programmer php_programmer 18.02.2015 17:35:41

Нашел тут интересную шпаргалку по тому, как центрировать элементы в css по горизонтали и вертикали. Посмотрите, может там что-нибудь новое для себя найдете (http://goo.gl/StHPPX)

Ответить

ivbutusov ivbutusov 18.02.2015 21:42:36

Спасибо большое, по-моему это действительно то что нужно и самое полное руководство по этой теме, которое я встречал!

Ответить

php_programmer php_programmer 19.02.2015 16:06:15

Рад, что вам пригодилось!

Ответить

kva191098 kva191098 01.04.2015 15:34:33

Михаил, я сейчас пригляделся. В HTML-коде вы берете как класс элемента, а в CSS обращаетесь, как к идентификатору(id).

Ответить

atlanta atlanta 01.05.2015 05:41:53

я тоже это заметил - #pagination и .pagination - это разные вещи

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.