css 垂直对齐 :middle; property is not working

Question

我的 CSS 有一些问题。我正在尝试垂直对齐:span 标记中的中间文本。

它适用于两行文本，但不适用于单行文本。

可以请一些帮助..

我使用了以下代码...

<div>
        <table>
            <tr>
                <td class="chld_Middle_Main_Right_Products_Landing_kits">
                    <ul>
                        <li>
                            <img /><input type='checkbox' value='28' /><br />
                            <a href='#'>
                                <span class='button2'>Antigua and Barbuda</span>
                            </a></li>
                        <li>
                            <img /><input type='checkbox' value='15' /><br />
                            <a href='#'>
                                <span class='button2'>Bosnia and Herzegovina</span>
                            </a></li>
                        <li>
                            <img /><input type='checkbox' value='1' /><br />
                            <a href='#'>
                                <span class='button2'>Pakistan</span>
                            </a></li>
                    </ul>
                </td>
            </tr>
        </table>

    </div>

我使用了以下 CSS

.chld_Middle_Main_Right_Products_Landing_kits {}
    .chld_Middle_Main_Right_Products_Landing_kits > ul {list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
    .chld_Middle_Main_Right_Products_Landing_kits > ul > li {display:inline-block; vertical-align:top; padding: 15px 15px 15px 10px; text-align: center;}
    .chld_Middle_Main_Right_Products_Landing_kits > ul > li > a {}
    .chld_Middle_Main_Right_Products_Landing_kits > ul > li > img {width: 112px; height: 112px; border: 1px solid #cccccc;}
    .chld_Middle_Main_Right_Products_Landing_kits > ul > li > input {vertical-align:top;cursor:pointer;margin:0px 0px 0px -20px;}
    .chld_Middle_Main_Right_Products_Landing_kits > ul > li > a > span {width: 102px;height:35px; display: inline-block; margin-top:-4px;margin-left:0px; font-family:verdana, sans-serif; text-shadow: 1px 0.5px 0 rgba(0,0,0,0.3);color:#666;}

    .button2{width:120px;font-size:10px;font-family:verdana, sans-serif; padding: 5px 5px 5px 5px; text-shadow: 1px 0.5px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color:#666; background-color: #dedbdb;border:1px solid #CCC; text-decoration:underline;cursor:pointer;}
    .button2:hover{background-color: #00adee;cursor:pointer; color:#fff;text-decoration:underline;}

Answer 1

添加到 span 这个属性 display: table-cell;垂直对齐:居中；

这是工作示例 http://jsfiddle.net/7DgjP/