【css】【手机web app开发】…

第一种：box-align 要居中的元素调用一下class='jz'

.jz{

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

-webkit-box-align: center;

display: -moz-box;

-moz-box-orient: horizontal;

-moz-box-pack: center;

-moz-box-align: center;

display: -o-box;

-o-box-orient: horizontal;

-o-box-pack: center;

-o-box-align: center;

display: -ms-box;

-ms-box-orient: horizontal;

-ms-box-pack: center;

-ms-box-align: center;

display: box;

box-orient: horizontal;

box-pack: center;

box-align: center;

}

第二种：display:table特性

把div结构变成table结构，即有table的布局好处又有div+css的特性，table支持垂直居中，而div+css垂直居中一直都是一个弊病，如果在pc
web上都是固定宽高那没什么，如果到了web
app手机上要做到自适应高度基本没办法实现垂直居中，或者大量使用js来设置每个文字处的line-height的高度px，我放弃这种做法，怕影响性能，
下面是我的应用实例：注意加粗地方的代码;
<style>
footer{height:100%; overflow:hidden;}
footer menu{height:100%; width:100%;
display:table; }
footer menu
li{width:33.1%;height:100%;display:table-cell;vertical-align:middle;}
</style>

<footer>
<menu>

<li><a
href="javascript:">关于我们</a></li>

<li><a
href="javascript:">游戏客服</a></li>

<li><a
href="javascript:"
target="_blank">游戏论坛</a></li>

</menu>

</footer>

结果图一个在pc上一个在手机上的；当然字体的font-size:100%上的设置问题，必须要父元素上先设置font-size的默认像素


app开发】建站时经常会碰到垂直居中的问题，这边我是用display:table或box-alig" TITLE="【css】【手机web app开发】建站时经常会碰到垂直居中的问题，这边我是用display:table或box-alig" />



app开发】建站时经常会碰到垂直居中的问题，这边我是用display:table或box-alig" TITLE="【css】【手机web app开发】建站时经常会碰到垂直居中的问题，这边我是用display:table或box-alig" />

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。