pc app 兼容问题

yczxqy

我的应用，在 web 上运行时，希望组件能居中，但目前偏左，如图：

具体设置方法：
1、在 panel 外围加一层 div ，并且设计 text-align : center ;
2、设置 panel 的宽度，并且： margin : 0 auto
如图：



panel 的 css 为：
.divboxpc{
        width : 400px;
        height: 100%;
        margin:0 auto;
}


但上面的设置，并未能让内容居中，请指导一下，急！

liangyongfei

你的div指定了 宽度是 width : 400px;   
这个就不应该指定的！宽度应该自适应才对的~！
在浏览器就显示浏览器宽度！在手机就显示手机宽度！
如果你想在浏览器中模拟手机，用过将浏览器宽度变小或者 F12 模拟手机运行

如果非要想在浏览器中  居中运行手机大小的页面！！那你在外层再放一个div ，并设置宽度为100%   让里层的div在外层div中居中显示就行

yczxqy

我不是想在调试环境下用，是想在正式环境下用。我们研发的重点在手机上，现在许多人要在PC上用，没有时间重新做一套PC的，所以想采用一个折中的办法，就是把内容显示在PC屏幕的中央。
我们上面的示例就是按照你的这个方法：
1、在 panel 外层放了一个 div : divBox ,并设置 test-align 居中；但达不到居中的效果

yczxqy

我按梁总的指导，在 panel 的外层加一个 div ， 宽度100%，text-align : center
panel 指定宽度。
但实际运行时，仍偏左显示，请帮我把这个示例测试一下。
另外：我最终还想在显示内容居中后，左右显示一个背景图，如下图所示：

liangyongfei

yczxqy 发表于 2017-4-21 13:08
我按梁总的指导，在 panel 的外层加一个 div ， 宽度100%，text-align : center
panel 指定宽度。
但实际 ...

具体布局怎么调，建议找个美工看看吧！
我这里方法是！直接放置一个row组件
row-$UI/system/components/justep/row/row

使用3个col 两边是空的，中间放置panel组件！

panle组件 class属性 x-full 去掉就OK  了！

yczxqy

这样，每个界面都要大改动才行，我刚才的案例为什么做不到这个效果呢？
其实，单个 .w 文件，如：单独运行 main.w 是能达到要求的，但在 index.w 中运行就不行了，问题到底出在哪里？

yczxqy

另外：penal 的 class 属性：x-full 去掉，就显示不出来了，这是怎么回事？

liangyongfei

yczxqy 发表于 2017-4-21 14:20
另外：penal 的 class 属性：x-full 去掉，就显示不出来了，这是怎么回事？

你看一下x-full  的class属性吧！  就是占满全屏的！
如果你能想做到这个效果！应该参考
http://www.wex5.com/portfolio-items/demo-wex5portal/

可以上网搜下  浏览器中显示手机页面的方法！  或者直接F 12 就行了啊！

你的那种需求很难做到！因为一些class样式已经制定好了（比如绝对布局）！ 除非覆盖这些样式

yczxqy

http://www.wex5.com/portfolio-items/demo-wex5portal/
上面这个效果好，您们是怎么做到的？可以给我参考代码吗？

yczxqy

百度上显示的显示手机效果的方法，太复杂，我们不能要求客户这样设置。你们这个案例很好，能做到这样的效果也非常好了，请指导一下，拜托！