Инсталирайте Център, DarkGhost

Дизайн и създаване на уебсайт

CSS: Как да центрирам?

Дори уеб професионалистите имат проблеми - как да позиционирате обект в центъра на страницата? Трябва да търсим решение на този проблем в Интернет, тъй като има ситуации, които изискват специален подход. Това искам да споделя в тази статия - за начини за центриране на обект с помощта на CSS

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

Ако мислите така, тогава ще си позволя да не се съглася с вас, защото правилото - text-align: center може да се приложи не само към текста, но и към картината. как?
Преди да продължа с примерите, искам да кажа, че всички представени опции за центриране ще бъдат направени в следния html код:

Центриране с подравняване на текст

Не мога да не се съглася, че най-простото решение е най-добрият и най-приемлив вариант. Както се казва, защо да преоткриваме ново колело?
За да подравните картината в центъра с помощта на подравняване на текст, трябва да зададете свойствата

Но за тази опция трябва да запомните, че такова решение предполага само хоризонтално положение, а не вертикално. За да се подравнят също вертикално, ще е необходимо блокът div да посочи полета отгоре, отдолу - margin-top и margin-bottom

марж: автоматично

Спомнете си, че свойството margin задава определен марж от всяка граница на обекта и ако това свойство е равно на стойността - auto, тогава това ни казва, че сумата на всички тези полета ще бъде изчислена автоматично от браузъра.