图片如何在VBOX布局下居中显示

Gnid

想在点击BUTTON弹出的WINDOW窗口中居中显示一个图片，水平方向和垂直方向都要居中。

1. <f:Panel ID="Panel1" runat="server" ShowBorder="false" ShowHeader="false" BoxFlex="1" Layout="VBox" BoxConfigAlign="Center" BoxConfigPosition="Center">
   
2.             <Items>
   
3.                 <f:Image ID="imgPreview" runat="server" ImageUrl="~/111.jpg"></f:Image>
   
4.             </Items>
   
5.         </f:Panel>

复制代码

项目运行后，第一次点击BUTTON弹出窗口，图片明显不是水平和垂直居中，如下图：



这时如果关闭WINDOW，然后再点击BUTTON打开窗口，显示就正常了，如下图：



经测试，FF、CHROME、IE都存在这样的问题，不知道是BUG，还是我的代码有问题。

sanshi

这个不是BUG。

原因是在进行布局的时候，图片还没有加载完毕，因此尚不知道图片的大小。有两种解决办法：

1. 明确图片的大小，类似如下代码：

1. <f:Image ID="imgPreview" runat="server" Width="150" Height="204" ImageUrl="~/test/111.jpg"></f:Image>

复制代码

2. 延迟重新布局：

1.     </form>
   
2.     <script>
   
3.         var panel1ClientID = '<%= Panel1.ClientID %>';
   
4.         F.ready(function () {
   
5. 
   
6.             window.setTimeout(function () {
   
7.                 F(panel1ClientID).doLayout();
   
8.             }, 100);
   
9.             
   
10.         });
    
11. 
    
12.     </script>
    
13. </body>
    
14. </html>

复制代码

Gnid

非常感谢三石兄。