Уеб разработка с CSS. Блок в центъра на блока: как бързо да разрешите проблема?

CSS - езикът на каскадни стилови листове. Старата технология, която се появи в зората на WEB, днес активно се развива и ви позволява да решите много задачи, за които преди сте имали нужда от javascript, с местни средства. Но в някои случаи все още имаме слабост на CSS. Блок-центрираният блок - такава тривиална задача все още е актуален въпрос за всеки, който все още разбира основите на уеб разработката. С появата на Flexbox и Grid Layout технологията, тази задача е станала много по-лесна, но не всички браузъри и за същата версия на IE 9 ще трябва да търсят други решения. Така че нека разгледаме основните начини за подравняване на блокове в CSS.


Хоризонтално подравняване, или Как да се постави блок в CSS в центъра

Най-лесният начин да центрирате блока в хоризонтална равнина, тук са няколко прости и усъвършенствани решения. Първият начин е да се използва маржът на имота, който е отговорен за външните отстъпи и ви позволява да подравните блока в центъра. CSS ви позволява да направите това много грациозно. Важно е да не го бъркате с свойството padding, което ви позволява да зададете вътрешни отстъпи от всяка страна на блока, "бутане" от съдържанието на границата и създаване на свободно пространство между тях. Вторият начин е да се използва свойството text-align: center, ако блокът е настроен да показва или inline или display: inline-block.

Автоматично повторение на дясно и ляво чрез поле: 0 auto

Свойството марж позволява ефективнопоставете в CSS блока в средата на основния блок, т.е., той е подходящ за случаи, когато всеки елемент има свойство display: block. Просто посочете маржа: 0 авто; в CSS файла или използвайте атрибута style в HTML кода. Декодира съдържанието на този параметър:


  • 0 - означава липсата на външни отстъпи от горната и долната част на елемента;
  • Авто показва на браузъра, че независимо изчислява вдлъбнатините надясно и наляво, като определя свободното пространство от двете страни и ги разпределя по еднакъв начин от всяка страна на блока.
  • Ако всичко е направено правилно, тогава при настройка на маржа на имота: 0 auto; В CSS, блокът в центъра на блока ще бъде автоматично. Можете да зададете разумен въпрос: "Защо не мога да поставя марж: автоматично авто, изравняване на единица дори вертикално?" За съжаление, тази опция няма да работи поради характеристиката на блоковия модел, като например вертикалния срив на външния отстъп.

    Какво да се направи, ако на даден блок е дадено поведение на низ?

    Както споменахме по-горе, една от ключовите характеристики на CSS е, че всеки блок може да бъде настроен на един от няколко модела на поведение. По-горе разгледахме случая, когато елементът е блок не само на външен вид, но и в връзката "в потока", с други елементи на страницата. Сега ще разгледаме случая, когато на обекта е даден ред (дисплей: inline) или дисплей: inline-block. И в първия, и във втория случай, той ще възприеме свойствата, които управляват поведението на текста на страницата. И за да подравним блока в центъра на CSS ще помогнем на параметъра text-align: center, който ви позволява да решитезадача без никаква трудност. Ние просто го поставяме на родителското устройство, а нашият елемент автоматично става точно в средата в хоризонталната равнина. Други подобни свойства, като вертикално подравняване: среда, ще бъдат повлияни от него, за вертикално подравняване на текста.

    Елегантен CSS: използвайте позицията на свойството: абсолютна

    В CSS, подравняването на блока в центъра е възможно и с помощта на абсолютно позициониране. За да се подредят елементите по нестандартния начин, най-често се използват позицията: относителни свойства, която ви позволява да я движите във всяка посока, с запазване на първоначалното място на страницата, и чрез позицията: абсолютна, напълно "изваждаща" елемента от потока и идеално пригоден за позициониране CSS единица в центъра на блока във вертикална равнина. Да предположим, че нашият обект е височина 100px и ширина 200px, стандартен правоъгълник. За да го подравним в центъра, го молим да напусне лявата и горната 50% (ляво: 50% и отгоре: 50%), а след това - отрицателните външни полета от тези страни до половината от ширината и височината на блока (марж-ляво: -100px) и отгоре: -50px). Уточнете този момент по-подробно.
    Лявата и дясната характеристика със стойност 50% заемат елемента в горния ляв ъгъл и го поставят в CSS блока в центъра на основния блок. Но това не е всичко. В момента, в CSS, подравняването на блока в центъра все още не може да се нарече точен, тъй като центърът сега е само горния ъгъл на елемента. За да постигнете най-добър резултат, трябва да преместите елемента обратно до половината от широчината и височината, използвайки подходящвертикални отстъпи или по-сложно свойство на преобразуване: translate (-50%, -50%), което изпълнява същата функция. Сега блокът е разположен идеално точно. В заключение отбелязваме, че проблемът може да бъде решен с помощта на Flexbox технологията, но е предназначен за напреднали потребители и не работи във всички браузъри.

    Свързани публикации