2013-04-15 34 views
0

我有一些问题与CSS。我正在尝试垂直对齐:span标记中的中间文本。css vertical-align:middle;财产不起作用

它适用于两行文本,但不适用单行文本。在一个

可以请一些帮助..

我用下面的代码...

<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;} 
+0

在IE9中不工作, – Bhavik

回答

0

使用中间对齐标签

1

添加到span此属性display: table-cell; vertical-align: middle;

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

+0

其工作只在Firefox中 – Bhavik

+0

@Bhavik在我的Chrome中正常工作。 –

0

试边距:100%;边距:100%;