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

【问题标题】：Problem centering a block of images with horizontal panel使用水平面板将图像块居中的问题
【发布时间】：2011-06-26 15:15:36
【问题描述】：

好吧，就像标题说的那样，我正在尝试在水平面板中将一块图像居中，看起来像

|-------iiiiii-----|

其中 | 是屏幕边框，而 i 是彼此相邻的所有图像

我一直在尝试使用类似的变体

<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，但我得到的唯一结果是 |iiii--------|或|--i--i--i--i--i--| （如果我取出显示：块）

【问题讨论】：

尝试删除 width='100%' 然后将 margin-left 和 margin-right 设置为 auto。
实际上似乎一直以来它都不是以 chrome 为中心，尽管在 IE 和 firefox 上都很好...

标签： gwt uibinder

【解决方案1】：

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

【讨论】：