Как центрировать две холсты друг на друга?

Question

Мне нужно показать один холст HTML5 поверх другого. Это я уже успел следующим образом:

<canvas id="lower" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
<canvas id="upper" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 

Однако, я не могу показаться, чтобы выяснить, как CENTER эти два полотна, сохраняя при этом один поверх другого. Есть идеи?

Answer 1

сделать внешний контейнер с text-align:center и position:relative, сделать внутренний контейнер с position:relative, положить холсты внутри внутреннего контейнера, удалить left:0;top:0; на обоих полотнах, и удалить position:absolute на нижней части полотен. И убедитесь, что в html нижний холст появляется перед верхним холстом, как и у вас.

#container { 
    text-align:center; 
    position:relative; 
} 

#inner_container{ 
    position:relative; 
} 
#upper { 
    z-index: 1; 
} 
#lower { 
    position:absolute; z-index: 0; 
} 

http://jsfiddle.net/NW6Fx/

Редактировать: Я считаю, что свойство г-индекс не нужен, если вы делаете это таким образом. Заказ - это просто вопрос, из которого холст появляется первым в html, а это position:relative.

Answer 2

Вы можете поместить между ними структурной линии <br/>

или

может попытаться дать каждому из них следующий CSS:

{ 
    margin:auto; 
    clear:both; 
} 

С абсолютным позиционированием вы должны использовать верхнюю часть. Для первого, например, положите top: 50px. Это переместит первые элементы 50px сверху. Для второго, положите top: 100px.

Answer 3

Поместите их внутрь <div> с моделированием:

div#canvasContainerId { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    width: 900px; 
} 

• position: relative вызывает absolute позиционирование <canvas> эс стать относительно их содержащий <div>.
• Поля auto, а также фиксированный width, центр <div>.