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; vertical-align: middle;

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

Answer 2

使用标签中的中间对齐

Answer 3

尝试保证金：100％;边距：100％;

css vertical-align：middle;财产不起作用

3 个答案: