css中怎么实现文字图片垂直居中效果
本篇文章给大家分享的是有关css中怎么实现文字图片垂直居中效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>轻松实现：垂直居中文字图片</title> <!-- START Plugin CSS --> <style type="text/css"> html{ font-size:12px; } .control{ width:600px; border:1px solid #000; padding:10px; margin:0 auto; } .main_header{ border:1px solid blue; height:100px } .main_body{ border:1px solid red; height:500px } .main_footer{ border:1px solid #ccc; height:100px } .main_header,.main_body,.main_footer{ margin-bottom:5px; } .content{ width:102px; margin:10px auto; overflow:hidden; } .content .info{ width:100px; height:200px; border:1px solid green; display:table-cell; vertical-align:middle; margin:0 auto; } .content .fix{ display:inline; width:0; height:100%; vertical-align:middle; zoom:1; /*触发IE hasLayout*/ } .content .desc{ display:inline; width:100%; vertical-align:middle; zoom:1; /*触发IE hasLayout*/ } .content .img{ float:left; width:100px; height:100px; border:1px solid #333; line-height:100px; text-align:center; *font-size:100px; /* IE */ } .content img{ vertical-align:middle; } </style> <!-- END Plugin CSS --> </head> <body> <div class="control js_control"> <!-- START header --> <div class="main_header" > header </div> <!-- END header --> <!-- START body --> <div class="main_body"> <div class="content"> <div class="info"> <div class="fix"></div> <div class="desc"> 无霜制冷，不仅节能省电，还免去除霜烦恼。冷冻速度快，食材由内到外均匀冻透，保鲜效果好，口感新鲜，更能锁住营养不流失。 </div> </div> </div> <div class="content"> <div class="img"> <img src="P020140403556494729753.jpg" width="50" height="50" /> </div> </div> </div> <!-- END body --> <!-- START footer --> <div class="main_footer"> footer </div> <!-- END footer --> </div> <!-- START Plugin JS --> <script type="text/javascript"> </script> <!-- END Plugin JS --> </body> </html>
以上就是css中怎么实现文字图片垂直居中效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。
