X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Выравнивание по центру блока произвольной ширины

Приклад
  • 2024-11-05
  • 4943 переглядів

  • Дизайн та розробка сайту

Доброго времени суток 🙂

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

Выравнивание по центру

Немного отступлю от темы, к вопросу выравнивания. Выровнять по центру элемент с заданной шириной можно с помощью - margin. То есть задаем ширину и отступ, выглядит это примерно так.

.div{	
	width:250px; 
	margin:0 auto;
}

Если блок имеет ширину в процентах, то свойство auto уже не поможет, но это не страшно, нужно просто применить немного математики.

Например блок у нас имеет ширину 40% от родителя. Чтобы его выровнять, нам надо отступить равномерно от обеих краев. Если ширина родителя 100% - 40% ширины нашего блока, остается 60%, значит по 30% на каждую сторону. Значит задаем такие параметры в стилях:

.div{	
	width:40%; 
	margin-left:30%;
}

Но тут следует учесть, маленькое НО! Если вы зададите блоку padding, его ширина увеличится, и выравнивание будет неровным. Поэтому следует это учесть, задавая внутренний отступ - padding в процентах, а потом от отступа слева отнимать этипроценты:

.div{	
	width:40%; 
	padding:0 5%;
	margin-left:25%;
}

Ну или же прописать блоку параметр box-sizing:padding-box; - он применяется для изменения алгоритма расчета ширины и высоты элемента, то есть ширина останется 40%, не смотря на padding.

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

Есть один простенький способ, который состоит в том, что сначала мы смещаем наш блок вправо на половину ширины родителя, а потом двигаем влево на половину своей собственной ширины. Если посмотреть на код, то это будет выглядеть так:

        <div class="container">
            <div class="block">Содержание блока</div>
        </div>

И стили. которые все и сделают.

.container {
    float: left;  
    position:relative;
    left: 50%;                
}
block {            
    position:relative;
    left: -50%;
    float: left;
}

Теперь все станет четко по центру, но есть опять маленькое НО! Если Вы будете применять данный метод при адаптивной верстке, то у Вас появится маленький глюк, при уменьшении ширины страницы, родитель блока, будет на пол своей ширины вылазить за весь контент. Поэтому всю эту конструкцию нужно заключить еще в один блок или тому блоку в котором они уже у Вас находятся, нужно добавить нужную ширину и свойство - overflow:hidden;, которое обрежет все, что будет вылазить за пределы. Ваш блок и останется в центре, но пустота справа исчезнет, при маленьком размере страницы.

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 6, в среднем: 4.7 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078