Таблица HTML: выравнивание по центру, независимо от ширины браузера

Question

Это продолжение предыдущего вопроса SO Anchoring CSS Repeating Background Image, но достаточно разного для рассмотрения в качестве отдельного вопроса.

JsFiddle http://jsfiddle.net/By2xj/ демонстрирует концепцию. У меня есть изображение баннера (в центре), которое затем требует повторения изображений слева и справа, которые будут отображаться и повторяться в зависимости от ширины окна браузера. Оговорка заключается в том, что левое и правое изображения должны быть зафиксированы на краю изображения центрального баннера. Вы можете увидеть этот эффект, если вы развернете окно jsFiddle Result - левое и правое повторяющиеся изображения всегда остаются заблокированными в стороне от изображения центрального баннера и расширяются из этой точки.

Итак, все это работает, но я использовал таблицу для достижения этого эффекта, поскольку CSS, предложенный в предыдущем SO-вопросе, не полностью работал и был зависимым от браузера, в частности, не играл со старыми браузерами.

С помощью этого решения, основанного на таблицах, я хотел бы всегда держать центральное изображение баннера в центре, даже если ширина браузера меньше, чем баннер. Если вы уменьшите размер окна jsFiddle Result, вы увидите, что, когда ширина браузера меньше, чем баннер, баннер придерживается выравнивания по левому краю, а не центрируется.

Итак, мой вопрос в том, как я могу всегда выравнивать центр центра баннера (или, вернее, выравнивать всю таблицу), даже если ширина браузера меньше ширины баннера (и содержит ячейку таблицы)?

В ожидании какой-либо помощи.

Answer 1

Немного обманываем, но, надеюсь, что вы ищите.

http://jsfiddle.net/By2xj/8/

, что происходит это, я создаю DIV в этой средней ячейке, и положение абсолютного, после того, центрирования его на экране. что div будет оставаться центрированным все время, независимо от размера окна браузера.

для записи:

<table id="banner-table"> 
    <td id="left-image"></td> 
    <td id="center-image"><div></div></td> 
    <td id="right-image"></td> 
</table>​ 

CSS:

#banner-table { 

    width: 100%; 
    height: 200px; 
    padding: 0; 
    margin: 0; 
    border-collapse: collapse; 
    table-layout: fixed; 
} 

#left-image { 
    background-image: url(http://www.dummyimage.com/100x200/ff0303/ffffff.png&text=Left); 
    background-position: right; 
    background-repeat: repeat-x; 
} 

#center-image { 

    width:400px; 


} 
#center-image div { 
    top:0; left:50%; 
    margin-left:-200px; 
    width:400px; 
    height:200px; 

    position:absolute; 
    background-image: url(http://www.dummyimage.com/400x200/0021fa/ffffff.png&text=Center); 
    background-position: center; 
    background-repeat: no-repeat; 
} 
#right-image { 
    background-image: url(http://www.dummyimage.com/100x200/1f9900/ffffff.png&text=Right); 
    background-position: center center; 
    background-repeat: repeat-x;}​ 

Answer 2

Вы могли угробить столы и идти с чем-то вроде этого:

http://jsfiddle.net/bryandowning/f2unW/

Answer 3

Вы должны редактировать свои Код HTML как:

<table id="banner-table"> 
    <td id="left-image"></td> 
    <td id="center-image"><div></div></td> 
    <td id="right-image"></td> 
</table>​ 

Сначала вы можете реализовать это без какого-либо файла CSS. Затем вы можете настроить свой код как свое требование.