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=" 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;为了上下居中

我从来不相信什么懒洋洋的自由。我向往的自由是通过勤奋和努力实现的更广阔的人生。我要做一个自由又自律的人，靠势必实现的决心认真地活着。