css模仿表格 居中

 

 

<div class="service_box">
<div class="service_list"> <span class="service_img"><img src="http://www.cnblogs.com/images/ReserveServices/YuYue1.png" alt="" /></span> <span class="service_desc"><em>吸油烟机</em><br /><em>JQ01T</em></span>
<span class="install_btn">安装</span>
<span class="repair_btn">保修</span>
</div>

</div>
<style><!--
.service_list {height:130px;font-size:0;border-bottom:1px solid #333333;line-height:130px;}
.service_list span{display:inline-block;background:#ccc;vertical-align:middle;font-size:24px;color:#d8a386;position:relative;margin-right:20px;}

.service_list span.service_img{width:120px;text-align:center;}
.service_list span.service_desc{line-height:1.2;width:158px;text-align:center;}
.service_list span.install_btn{height:55px;line-height:55px;width:120px;text-indent:52px;border-radius:10px;border:1px solid #b68250;background:rgba(216,163,134,0.3);margin-left:0px;}
.service_list span.repair_btn{height:55px;line-height:55px;width:120px;text-indent:52px;border-radius:10px;border:1px solid #b68250;background:rgba(216,163,134,0.3);margin-right:0px;}
--></style>