Как сложить все по центру со сложенными детьми в неизвестных измерениях?

0

Я правильно сделал стек divs, но дети не центрированы. В частности, я работаю с холстом и другим div, который функционирует как мой входной слой. У меня есть слой ввода поверх холста и занимает весь экран, в то время как я хочу, чтобы холст был центрирован (слой ввода также может быть центрирован, но он занимает весь экран, так что он не должен сильно меняться. вероятно, полезно отметить, что причина, по которой я не знаю высот и ширины, заключается в том, что это отзывчивый сайт. Прямой javascript jquery, css3, html5 будет действительным решением, если оно будет сосредоточено в конце.

TL;DR: div container → (div input && canvas) parent → (child && child) делает холст неизвестной высоты и ширины на странице

EDIT: я хочу, чтобы синеватовое поле (холст) было сосредоточено на странице. http://jsfiddle.net/t2fL9/4/ code block to let me put jsfiddle link?

Теги:
responsive-design

3 ответа

1
Лучший ответ

Обновите JS следующим образом:

var $wrapper = $('#wrapper'),
    $canvas = $('#canvas'), 
    canvas_width = $canvas.width(),
    canvas_height = $canvas.height(),
    $window = $(window);

$window.resize(function(){
    $wrapper.css({
        width: $window.innerWidth(),
        height: $window.innerHeight()
    });

    $canvas.css({
        marginLeft: -canvas_width/2,
        marginTop: -canvas_height/2
    })    
}).trigger('resize');

DEMO

Поделиться
  • 1
    принято, потому что это отзывчиво, спасибо!
  • 0
    хм, реализованный на реальном сайте, и он на самом деле не похож на пример jsfiddle. В частности, нет наложения розового цвета и не происходит центрирования. Живой пример (изменится, когда я заставлю вещи работать! Не должен меняться в течение некоторого времени): damiankulp.com/damian/gallery/protobox
Показать ещё 8 комментариев
1

Если вы можете жить только с поддержкой IE9+, вы можете использовать преобразование CSS3 для достижения этого:

position:absolute;
top: 50%; 
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

Кредит для этого ИМО довольно изящный трюк идет по адресу: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Обновленная скрипка: http://jsfiddle.net/t2fL9/5/

Изменение размера скрипта: http://jsfiddle.net/t2fL9/11/

Обратите внимание, что количество javascript, необходимое для достижения центрирования, значительно меньше, чем в принятом ответе.

Поделиться
  • 0
    В то время как я решительно думал только о поддержке, то есть я работаю над игрой для соревнований, и она должна быть мобильной, поэтому ограничение себя на выигрыше телефона 7 кажется не очень хорошей идеей.
  • 0
    @dlkulp Это работает в Firefox, Chrome и IE9 +. Извините, что не разъяснил.
Показать ещё 3 комментария
1

Это должно сделать это за вас. используя холст в качестве примера.

CSS

#canvas{
position: absolute;
top:50%;
left:50%;
}

Javascript:

var canvas = document.getElementById('canvas'),
canWidth = canvas.width,
canHeight = canvas.height;

canvas.style.marginLeft = canWidth/2*-1;+"px"
canvas.style.marginTop = canHeight/2*-1+"px";

Пример скрипта http://jsfiddle.net/t2fL9/7/

Поделиться
  • 0
    Свойства верхнего и левого css помещают верхний левый угол холста в центр экрана, но центр холста не находится в центре экрана. jsfiddle.net/t2fL9/1
  • 0
    лучший пример того, что я хочу: jsfiddle.net/t2fL9/4
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню