【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垂直居中一直都是一个弊病，如果在pcweb上都是固定宽高那没什么，如果到了webapp手机上要做到自适应高度基本没办法实现垂直居中，或者大量使用js来设置每个文字处的line-height的高度px，我放弃这种做法，怕影响性能，

下面是我的应用实例：注意加粗地方的代码;

<style>

footer{height:100%; overflow:hidden;}

footer menu{height:100%; width:100%;display:table; }

footer menuli{width:33.1%;height:100%;display:table-cell;vertical-align:middle;}

</style>

<footer>

<menu>

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

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

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

   </menu>

</footer>

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

值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block行内块元素。（CSS2.1 新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。markerCSS 中有值 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 属性的值。