好吧，说实话，这个问题对一个Web新手真的很头痛。之前遇到过，使用了些乱七八糟的方法CSS style终于解决。昨天又碰到到了，这次没那么幸运，在网上仔细搜索实践之后，得到了一个比之前用float:right（非常可怕的style, 慎用！）更好的办法。
其实主要的思路就是用display:table, display:table-cell.
HTML如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div style="display:table;width:100%;"> <div style="display:table-cell;"> <div style="border:1px solid red;height:100px; display: table;text-align:left;width:100%;padding-right: 10px;"> <div style="border:1px solid blue;display: table-cell;vertical-align: middle;"> <img src="http://img.baidu.com/img/logo-zhidao.gif" style="border:1px solid green;"/> </div> </div> </div> <div style="display:table-cell;"> <div style="border:1px solid red;height:100px; display: table; text-align:right;width:100%;padding-right: 10px;"> <div style="border:1px solid blue;display: table-cell;vertical-align: middle;"> <img src="http://img.baidu.com/img/logo-zhidao.gif" style="border:1px solid green;"/> </div> </div> </div> </div> |
这样就能知道一个两列分别左右对齐居中的Layout了。
这里还有一个TIP，vertical-align对img不起作用，所以要加上一个空格( )做placeholder.
Web的学习之路还很长啊。
