如何在Step Carousel的面板中垂直居中显示图像？

Question

请问我是否在Step Carousel的面板中垂直居中图像？

我可以输入以下命令：

<div class="panel">

<a href="url" target="_blank">
<img src="/image" border="0" position= "center" alt="copy goes here" />
</a>
</div>

感谢

Answer 1

这是一种简单的方法：http://jsfiddle.net/David_Knowles/XVMzf/1/

.panel { 
    vertical-align:middle; /* this is the key */
    display:table-cell; /* this is the key */
    height:400px; 
    width:600px; 
    text-align:center; 
    background-color:yellow; 

}

<div class="panel">
    <a href="url" target="_blank">
        <img src="http://dummyimage.com/300x200/000/fff&text=dummy-image" alt="copy goes here" />
    </a>
</div>

所有现代浏览器都支持IE8及以上版本。

---

这适用于较旧的浏览器，但您必须知道.panel的高度 http://jsfiddle.net/David_Knowles/XVMzf/2/

Answer 2

#Content-innerCt {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  vertical-align: middle !important;
}

试试这个。它对我有用。