Да предположим, че имам <div>
, който искам да центрирам в дисплея на браузъра (viewport). За да направя това, трябва да изчисля ширината и височината на елемента <div>
.
Какво трябва да използвам? Моля, включете информация за съвместимостта с браузърите.
ЗАБЕЛЕЖКА: този отговор е написан през 2008 г. По онова време най-доброто решение за повечето хора наистина беше да използват jQuery. Оставям отговора тук за потомство и ако използвате jQuery, това е добър начин да го направите. Ако използвате някаква друга рамка или чист JavaScript, приетият отговор вероятно е правилният начин.
От версия 1.2.6 на jQuery можете да използвате една от основните CSS функции, height
и width
(или outerHeight
и outerWidth
, според случая).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
Element.offsetWidth и element.offsetHeight трябва да са достатъчни, както е предложено в предишния пост.
Ако обаче искате само да центрирате съдържанието, има по-добър начин за това. Предполагаме, че използвате xhtml strict DOCTYPE. задайте на тага body свойството margin:0,auto и изискваната ширина в px. Съдържанието се центрира спрямо страницата.