Question

好吧，就像标题所说我试图将一块图像居中放在水平面板中看起来像

| ------- ------ 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>

还有其他的东西，比如将margin-left和margin-right设置为auto，但我得到的唯一结果是 | IIIII ------- |或者| - i - i - i - i - i-- | （如果我拿出display：block）

Answer 1

Aaahhh，旧的居中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;
}

使用水平面板将图像块居中的问题

1 个答案: