CSS美满的笔墨垂直居中代码

发布时间：2018-08-16 15:11:06 所属栏目：活动来源：站长网

导读：一款CSS美满的笔墨垂直居中代码，来自海外的网页喜爱者网站，各人也许碰着过这样的题目，就是笔墨在层内垂直居中对齐，Word的表格中就有这种成果，而且实现了相应鼠标变革层配景的殊效。实例： !DOCTYPE HTMLhtmlheadmeta meta charset=gbktitleCSS垂直居

　　一款CSS美满的笔墨垂直居中代码，来自海外的网页喜爱者网站，各人也许碰着过这样的题目，就是笔墨在层内垂直居中对齐，Word的表格中就有这种成果，而且实现了相应鼠标变革层配景的殊效。

　　实例：

<!DOCTYPE HTML> <html> <head> <meta meta charset="gbk"> <title>CSS垂直居中</title> <style type="text/css" media="all"> body{color:black;background-color:white;padding:50px;font-size: 12px;line-height:16px;font-family:arial; color: #1E346E;} * {margin: 0;padding:0;border-width: 0;} .veryhuo_list{vertical-align: middle;width:640px;margin-bottom: 1px;border: solid 1px #00a0da;background-color:#F0F5FF; } .veryhuo_list:hover{background-color:#d9e7f5;} /*----------set vertical align middle----------*/ .veryhuo_list p,.veryhuo_list b { vertical-align: middle;display: -moz-inline-stack;display:inline-block;zoom:1;*display:inline;} .veryhuo_list p { padding:10px;} /*----------set min-height----------*/ .veryhuo_list b { height:52px;width:1px;overflow:hidden;margin-left:-1px;background-color:#009Cd0;} </style> </head> <body> <div class="veryhuo_list"><b> </b><p style="width:80px;">first class</p><p style="width:160px;">Can be modified</p><p style="width:160px;">Can be refunded.</p><p style="width:160px;">Can be endorsed</p></div> <div class="veryhuo_list"><b> </b><p style="width: 80px;">Economy class</p><p style="width:160px;">Can be modified</p><p style="width:160px;">Can be refunded.</p><p style="width:160px;">Can be endorsed</p></div> <div class="veryhuo_list"><b> </b><p style="width:80px;">23% off Economy class</p><p style="width:160px;">One free change permitted within same class if available; further changes charged 10% of fare. Passengers must go to CA ticketing office to process fee-based changes.</p><p style="width:160px;">10% of fare charged. </p><p style="width:160px;">Can not be endorsed</p></div> <div class="veryhuo_list"><b> </b><p style="width:80px;">-6% off Economy class</p><p style="width:160px;">Free change permitted within same class if available at least 4 days prior to departure.</p><p style="width:160px;">20% of fare charged (minimum CNY50 charge).</p><p style="width:160px;">Can not be endorsed</p></div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!