Проблема центрирования блока изображений с горизонтальной панелью - PullRequest
Новая
       18

Проблема центрирования блока изображений с горизонтальной панелью

0 голосов
/ 26 июня 2011

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

| ------- IIIII ------ |

где | - границы экрана, а я - все изображения рядом друг с другом

Я пытался использовать варианты чего-то вроде 

<ui:style>
....
.hPanel { display:block; }
</ui:style>
....
<g:HorizontalPanel width='100%' horizontalAlignment='ALIGN_CENTER' addStyleNames="{style.hPanel}" >
<g:Image resource="{icons.a}" ui:field="a"/>
<g:Image resource="{icons.b}" ui:field="b"/>
<g:Image resource="{icons.c}" ui:field="c"/>
<g:Image resource="{icons.d}" ui:field="d"/>
<g:Image resource="{icons.e}" ui:field="e"/>
</g:HorizontalPanel>

Также с другими вещами, такими как установка поля left-left и margin-right на auto, но я получаю только один результат: | IIIII ------- | или | --i - i - i - i - i-- | (если я вынимаю дисплей: блок)

1 Ответ

0 голосов
/ 27 июня 2011

А-а-а-а, старая центрированная задача div (без фиксированной ширины). Есть много решений, но они работают с разным успехом в разных браузерах.

Единственным, который работал для меня во всех браузерах, был список (<ul><li>) с левым и правым 50%.

Вы помещаете свои данные в <li></li>

#parent {
    width: 100%;
}

#parent ul {
    margin: 0;
    position: relative;
    list-style: none;
    float: left;
    left: 50%;
    padding: 0
}

#parent ul li {
    position: relative;
    float: right;
    right: 50%;
    padding: 0;
}
...