图片 垂直 水平 居中

 

水平居中样式 ---- text-align : center

垂直居中样式 ----- vertical-align : middle

 

 

<div style="text-align:center; width:100px; height:40px;">    <img src="图片" style="vertical-align:middle;" width="16" height="16" /></div>

 

 

在工作中遇到一个问题，按照上面两种样式设置，发现没有办法水平居中

原因分析：img 设置了样式 display : block

解决办法： img样式改为 display : inline

 

 

使用margin:auto 样式然图片水平居中

<div class="margin_center width_40 font_16">    <div style="height: 81px"></div><img id="img_load" class="img-responsive margin_auto" src="../img/tsdd/auditing_success.jpg"><div style="height: 48.6px"></div>    <div class="text-center color_4996f6">           恭喜您，提交成功    </div>    <div class="text-center color_4996f6">        请等待审核    </div></div>

 

 

.width_40 {    width: 40%;}.margin_center {    margin: 0 auto;}.img-responsive {    display: block;    height: auto;    max-width: 100%;}/* 如果图片的宽度大于父div的宽度，则撑满全部div,只需要父div水平居中即可 *//* 如果图片的宽度小于父div的宽度，则图片在父div靠左停靠，使用margin:auto则让图片居中 */.margin_auto {    margin: auto;}