垂直对齐图像和文本在表中

我在这里找到了一些文章和一些帖子,但没有一个是我正在寻找的东西,我试图修改它们但是没有按我的意愿工作.

我有1行和2列的表.第一列有一个带有图像的类 - url(数据).另一列只有文本,我想将它们垂直对齐到中间.

HTML:

    

        

            
 
            
more time
        
    

CSS:

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

在JsFiddle中也添加了代码.

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

您的图像是背景图像,因此您需要将其定位 background-position: center;

这是一篇关于CSS背景的方便文章.