Автоматический центр для динамического содержимого

Question

Здравствуйте, я использую тему WP, чтобы сосредоточиться на содержании, которое мне нужно отредактировать padding-left, потому что мы не знаем ширины области содержимого, потому что изменяем динамически в зависимости от разрешения экрана.

Проблема заключается в том, что разные браузеры имеют разную ширину прокрутки, а иногда нет прокрутки, очень сложно разместить идеальное центральное положение, рассчитанное из «padding-left» и медиа-запросов.

Я знаю разные методы, такие как margin: 0 auto, абсолютные позиции или встроенные блоки, которые в других случаях всегда работают.

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

Ссылка на веб-сайт является: http://www.fanonfire.com/magazine/

Прямо сейчас находится не по центру, но вы можете проверить, что мы используем для центровки сайта является:

.content_area {padding: 10px 0 0px 107px;}

Изменение последнего номера с различными media_queries. Но это не создает реальную центральную позицию и очень медленный процесс. Поэтому я не знаю, возможно ли сделать это с помощью Javascript и создать автоматическое дополнение в зависимости от экрана.

Спасибо!

Изменить: Я пытался с этим не без везения (спасибо ProllyGeek)

var main_width=parseInt($("#main").width()) // get main width var content_width=parseInt($(".content_area").width()) // get content area width var my_padding=((main_width-content_width)/2).toString() $(".content_area").css("padding-left",my_padding+"px") //set padding to the desired element

Answer 1

Я хотел бы предложить вам ознакомиться со следующим материалом:

http://www.demtron.com/blog/post/2009/01/14/Centering-a-DIV-Window-with-Cross-Browser-JavaScript.aspx

Answer 2

хорошо, если вы хочу сделать это с помощью jquery вот быстрый псевдокод

var container_width=parseInt($("#container").width()) // get container width 
var content_width=parseInt($("#content").width()) // get content area width 

var my_padding=((container_width-content_width)/2).toString() 


$("#content").css("padding-left",my_padding+"px") //set padding to the desired element 

http://jsfiddle.net/LmBRp/3/

, и если вы хотите увидеть его в центре, замените прокладку слева налево-левый.

Answer 3

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

Чтобы центрировать абсолютный позиционированный элемент с динамической шириной, вы можете использовать transform: translateX. С префиксами это работает в большинстве современных браузеров. Вроде так:

div { 
    width: auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -o-transform: translateX(-50%); 
    transform: translateX(-50%); 
}