image - 如何在 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

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

试试这个。它对我有用。

Answer 2

这是简单的方法：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/的高度