使用水平面板居中图像块时出现问题

发布于 2024-11-17 03:31:07 字数 717 浏览 2 评论 0原文

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

|-------iiii-----|

其中|是屏幕边框，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，但唯一的结果是我我得到的是 |iiiiii--------|或 |--i--i--i--i--i--| （如果我取出显示：块）

原文

Well, like the title says I am trying to center a block of images in a horizontal panel to look something like

|-------iiiii------|

where |'s are screen borders, and i's are all images next to each other

I've been trying to use variations of something like

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

Also with other things such as putting margin-left and margin-right to auto, but the only results I am getting is either
|iiiii-------| or |--i--i--i--i--i--| (if i take out display:block)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逆光下的微笑 2024-11-24 03:31:07

啊啊啊，旧的居中 div（没有固定宽度）问题。有很多解决方案，但它们在不同的浏览器上的成功程度各不相同。

唯一适用于所有浏览器的列表 (

) 的左侧和右侧均为 50%。

您将数据放入

#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;
}

Aaahhh, the old centered div (without fixed width) problem. There are many solutions, but they work with various success on different browsers.

The only one that worked for me on all browsers was a list (<ul><li>) with a left and right of 50%.

You put your data inside the <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;
}

回复收藏 0 原文

~没有更多了~