css 图片在div中居中

目的:为了让ID为navicatorbar的div中的图片实现居中

htm结构:

1 <div data-options="region:'north',border:false" style="height: 10%;">
2     <div id="navicatorbar" style="height: 100%">
3         <i></i> <img src="../img/ep-logo.png"
4             style="width: 12%; height: auto%; vertical-align: middle" />
5     </div>
6 </div>

css样式:

 1 #navicatorbar{
 2     background-image:url("../img/nav.jpg");
 3     background-size:100% 100%; 
 4      -moz-background-size:100% 100%;
 5      background-attachment: fixed;
 6      text-align:center;
 7 }
 8 i{
 9     display:inline-block;
10     width:0;
11     height:100%;
12     vertical-align:middle;
13 }

其中:text-align:center;为了作用居中;vertical-align:middle;为了上下居中

 

上一篇:可迭代对象的分解


下一篇:折半查找