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

Posted 2023-03-05

技术标签:

【中文标题】垂直对齐表格中的图像和文本【英文标题】：Vertical align image and text in table 【发布时间】：2016-03-23 15:08:30 【问题描述】：

我在这里找到了一些文章和一些主题，但没有一个是我想要的，我尝试修改它们，但没有按我的意愿工作。

我有 1 行 2 列的表格。第一列有一个带有图像的类 - url(data)。另一列只有文本，我想将它们都垂直对齐到中间。

<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：

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 center;到您的图像以使其居中 【参考方案1】：

你的图片是背景图片，所以你需要用background-position: center;定位它

这是handy article on CSS backgrounds。

【讨论】：

【参考方案2】：

对于背景，您应该使用带有可选两个参数的背景位置作为 xpos 和 ypos