вход

Как расположить элемент по центру при помощи CSS

Хитрости CSS которые вы должны знать

Здравствуйте уважаемые читатели блога mainview.ru. Думаю, каждый сейчас понимает, что создать современный сайт не так-то просто. Нужно не только обладать хорошими знаниями, но и иметь хороший опыт. Часто при разработке веб-сайта, можно столкнуться с рядом проблем, которые потребуют времени для нахождения решения, которые потребуют время на поиск и тестирование возможных решений. Именно поэтому я решил коснуться некоторых "маленьких больших проблем", с которыми веб разработчики сталкиваются постоянно. Сегодня хочу поговорить о том, как правильно расположить элементы внутри контейнера по центру.

Проблема. Как расположить элементы по центру при помощи CSS

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

Решение. Выравниваем элементы по центру при помощи CSS

Чтобы расположить элемент по центру, укажите ширину элемента, а затем используйте значение "Auto" для обоих полей (левого и правого):

#centered {
    margin-left:auto;
    margin-right:auto;
    width:800px;
}

Или можете записать правила в сокращённом виде, для того, чтобы выровнять элемент по центру контейнера:

#centered {
    margin:0 auto;
    width:800px;
}

ПОСМОТРИМ НА ЗНАЧЕНИЕ "AUTO" ПОДРОБНЕЕ

CSS содержат 7 уникальных свойств, которые применяется для установки горизонтального формата элемента margin-left, border-left, padding-left, width, padding-right, border-right, margin-right. Их сумма составляет общее горизонтальное пространство, которое элемент занимает на данной странице. Из семи свойств, три могут принимать как регулярные значения (в процентах, пикселях, точках и т.д.), так и значение "Auto". Это ширина элемента (width) , левая граница (margin-left) и правая граница (margin-right) .

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

  1. Два свойства со значением «Auto», одно свойство с фиксированным значением.
  2. Одно свойство со значением «Auto», два других свойства с фиксированным значением.
  3. Все три свойства имеют фиксированные значения.
  4. Все три свойства со значением «Auto».

1. ОДНО СВОЙСТВО СО ЗНАЧЕНИЕМ «AUTO», ДРУГОЕ С ФИКСИРОВАННЫМ ЗНАЧЕНИЕМ.

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

...

<!-- body>
    <div id="centered">
        <p>Здесь идёт текст элемента....</p>
    </div>
</body>
</html -->
#centered {
    margin-left:auto;
    margin-right:auto;
    width:600px;
}

Также в этой комбинации возможен, как вы поняли, и другой вариант. Предположим, что одно поле имеет фиксированную длину, а другое поле установлено в значение «auto». Ширина элемента также установлена значение «auto». В этом случае ширина поля, установленного в значение «auto» будет установлена в ноль, а максимально возможное пространство будет установлено для ширины самого элемента. Это необходимо учитывать для этого варианта. Например:

#centered {
    margin-left:200px;
    margin-right:auto;
    width:auto;
}

выглядеть это будет вот так:

2. ОДНО СВОЙСТВО СО ЗНАЧЕНИЕМ «AUTO», ДРУГОЕ С ФИКСИРОВАННЫМ ЗНАЧЕНИЕМ.

В этом случае браузер автоматически устанавливает ширину свойства со значением «auto», чтобы выдержать остальные два заданных значения. Например, если ширина элемента установлена в 960px, а левое поле в 200px, браузер автоматически рассчитает ширину правого поля.

#centered {
    margin-left:200px;
    margin-right:auto; /* браузер вычислит оставщуюся ширину этого поля исходя из других значений  */
    width:960px;
}

По умолчанию все браузеры устанавливают значения полей в «auto». Вы можете убрать строку margin-right:auto;, и вы получите тот же результат.

3. ВСЕ ТРИ СВОЙСТВА ИМЕЮТ ФИКСИРОВАННЫЕ ЗНАЧЕНИЯ.

В этом случае, браузеры будут вынуждены установить правое поле (margin-right) в автоматическиое значение. А это возвращает нас к предыдущему случаю:

#centered {
    margin-left:200px;
    margin-right:200px; /* браузер установит это поле в значение auto */
    width:960px;
}

4. ВСЕ ТРИ СВОЙСТВА СО ЗНАЧЕНИЕМ «AUTO».

В этом случае браузеры будет назначить элементу максимальную длину. То есть как правое так и левое поля будут обнулены.

#centered {
    margin-left:auto; /* будет установлено в ноль */
    margin-right:auto; /* будет установлено в ноль */
    width:auto;
}

ДОПОЛНЕНИЕ: Я ПРИМЕНИЛ ЭТОТ МЕТОД ДЛЯ ИЗОБРАЖЕНИЯ, НО ЭТО НЕ РАБОТАЕТ, ПОЧЕМУ?

Автоматические поля могут быть использованы только для блоковых элементов: таких как параграфы , "DIV", и списки, которые занимают всю строку, тем самым не позволяя добавлять пространство со стороны полей. Изображения, "span", "em", " strong", также известные как линейные элементы: элементы, которые не создают блок самостоятельно, они должны быть включены в блок элементов. Так как они считаются частями текста, "боковые" поля линейных элементов просто игнорируются веб-браузерами. Поэтому, для того, чтобы отцентрировать изображения, мы должны установить свойство " display " со значением " block ", так как это показано ниже .

   img { display:block; }

 

На этом сегодня остановлюсь. Если есть, что добавить, как всегда, комментарии открыты. Спасибо за внимание.

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
4 комментария

Статья → Как расположить элемент по центру при помощи CSS

  1. Если сделать div инлайн блоковым и указать центрирование текста, то картинки будут центированы.

    код #centered {display:inline-block;text-align:center;}

  2. поправочка, нужно еще добавить ширину #centered {display:inline-block;text-align:center;width:100%;}

  3. Николай:

    Спасибо огромное! Сделал так, как хотел!

  4. zmoe:

    А как выровнять на автомате все картинке в блоге? У меня в мобильной версии не центрируются…

Оставить комментарий

Статья → Как расположить элемент по центру при помощи CSS

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.