垂直对齐图像和表格中的文字

我在这里找到了一些文章和一些主题，但没有一个是我正在寻找的，我试图修改它们，但没有按照我的意愿工作。垂直对齐图像和表格中的文字

我有1行2列的表。第一列有一个包含image-url（数据）的类。另一列只有文本，我想将它们垂直对齐到中间。

HTML：

<div id="more-time2" class="very-small-text-size more-time " index="2" mode="Available" onclick="toggle(this.getAttribute('index'), this.getAttribute('mode'))"> 
    <table> 
     <tr> 
      <td id="arr-icon2" class="accordion_down"> </td> 
      <td id="more-time-text2" class="more-time-button" index="2">more time</td> 
     </tr> 
    </table> 
</div>

的CSS：在JsFiddle也

body 
{ 
    direction:rtl; 
} 
.more-time { 
     display: table; 
     width: 100%; 
     color: dodgerblue 
    } 

    td.accordion_down { 
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAaVJREFUSIm91c9KG1EUx/HvuRGzKVl2NxRnLD6DD1BoH2AOgWz6RxroypXgqiB0W+hGQSYiLoRm3FfotlAo3RUEF9USyEoQDIJlbDxdjC1VJ5mZNMnZzb3n3s/cxY8jS+0fc/DrEVOsKySZOeNBt8bRU8EWpwU7rOlilaQCdcNOpoEabEc6v+kANjXoCJWGQX/C6Lce1VcA7s9ipP5HkLUJumdGJYzVu7gBA/Tw3xiyPxnXLW3p3OHfr3+3YpU+zDaAzjhJQ95G6u/d+I3bTS31Tg0XGiTjQfnUw1+9vX4HTnH/C8jy/6N2ckm1HqvceUQmnOLBhsHu6Ch9odLYUa+btT8QBqhSaxp2MKL9Ok1Kdkne6eft4wVH/ytwr6hoyH5LgyfDeoa+GCCNgHtWFAU618kYWrkwQKT+nsG7vD6DxHBhS73TscAAPYIVQz4P75LlNBH5VRiOVZJLZsNBw8Rgt6XBRtH7CsMAO+p1s4aJYQdVas0yd5WCIXOYnF9BuK73z8vckxunQfWi/f2DYI+BeqTz78uenxkVTiPz82WkD0ujAL8B/TCG0encSKQAAAAASUVORK5CYII='); 
     width: 12%; 
     background-repeat: no-repeat; 
     background-size: contain; 
     display: table-cell; 
     vertical-align: middle; 
    } 

    td.more-time-button { 
     display: table-cell; 
     vertical-align: middle; 
     padding-right: 4%; 
     width: 100%; 
     padding: 0.25% 0; 
    }

添加的代码。

如何垂直对齐表中的数据？

来源

2015-12-17 Dror

你可以做一个背景位置：中心以图像为中心 – brandelizer