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

CSS е езикът на каскадните стилови листове. Старата технология, която се появи в зората на WEB, се развива активно днес и ни позволява да разрешим много от задачите, за които използването на jаvascript е било необходимо по-рано, с родствени средства.

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

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

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

Вторият начин е да използвате функцията text-align: center, ако блокът е посочен като поведение на линия или линейно блокиране (дисплей: inline или display: inline-block).

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

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

• 0 - не означава външни вдлъбнатини в горната и долната част на елемента;
• Auto казва на вашия браузър да изчисли тиретата самостоятелно и отляво, определяйки свободното пространство отстрани и разпределяйки го равномерно от двете страни на блока.

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

Какво трябва да направя, ако блокът получи поведение на низ?

Както казахме по-горе, една от основните характеристики на CSS е, че всеки блок може да получи едно от няколкото поведения. По-горе разгледахме случая, когато даден елемент е блок не само на външен вид, но и на позиция "в потока" - връзката с другите елементи на страницата.

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

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

В CSS, подравняването на блока в центъра е възможно и при абсолютно позициониране. За елементи подравняване нестандартен начин най-често използваната позиция свойства: относителна, което позволява да го преместите във всяка посока, като се запази оригиналната пространството страница, както и чрез позицията: абсолютно, напълно "избяга" елемент от потока, и идеално подхожда за да се позиционира в CSS блок в центъра на блока във вертикалната равнина.

Да предположим, че нашият обект има височина 100px и ширина 200px, стандартен правоъгълник. За да се приведе в центъра, ние го помоли да се отдръпне от лявата и горната 50% (вляво: 50%, а на върха: 50%), а след - отрицателни външни маржове с тези страни, в половината от ширината и височината на блока (марж-наляво: -100px и нагоре: -50px). Нека обясним тази точка по-подробно.

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