在表格行中垂直居中对齐的图像（wikisyntax）

Question

我试图垂直对齐一行表的内容。虽然文本似乎是中心对齐的，但图像拒绝这样做。

表格代码（使用wikisyntax！）

{| class="mp-left" style="background:#FFFFE0;"
! style="background:#FFDEAD; border:1px solid #EECFA1; border-right:0px; padding:0px; vertical-align:left; font-weight:normal; width:100%;" | <H3 class="mp">  <div style="float:left;">[[चित्र:Golden wikipedia featured star.svg|25px|alt=|link=]]</div>Featured Article</H3>
! style="background:#FFDEAD; border:1px solid #EECFA1; border-left:0px; padding:0px; vertical-align:middle;" | <div style="float:right;">[[File:Wikibar.png|90px|alt=|link=]]</div>
|}

CSS：

table.mp-left, table.mp-right {
vertical-align:top;
border-spacing: 0px;
}

h3.mp {
float:left;
margin-top: 0pt !important;/* Needed across browsers */
margin-bottom: 0pt !important;/* Needed across browsers */
padding-top: 0pt;
padding-bottom: 5pt;
padding-right: 1em;/* Needed for opera and safari on windows 7 */
padding-left: 5pt;
}

请参阅：

Answer 1

你可以尝试

table.mp-left td{
    vertical-align:middle;
}

Answer 2

也许这个小提琴可以帮到你：

http://jsfiddle.net/xmJ3R/3/

这是css：

* {padding:0;margin:0;}

body{padding:20px;}

.ctn {
    width: 100%;
    text-align: center;
}

.img-ctn {
    display: inline;
    margin-right: 3%;
    max-width: 120px;
    background: #cecece;
    font-size: 0;
}

.img-ctn > img {
    max-width: 100%;
    vertical-align: middle;
}

Answer 3

也许这会有所帮助：

<table>
    <tr>
        <td>
            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTsoLY17fqlLnsh_Pc0I4lpxAOcjmKHre1usiKdv0v3JYvibkSG1jo3PiM" />
            <span>Some Text here!</span>
        </td>
    </tr>
</table>

CSS

td {
    border:1px solid black;
}

span {
    display: inline-block;
    vertical-align: top;
    padding: .5em 0;
}

我把它放入JSBin。

显然，你需要适应你的需要。