如何使Liquid代码中Windows/Mac标题与对应图片垂直居中对齐？

你提供的Liquid代码中，图片和右侧的标题文字未垂直居中对齐，可通过以下两种简单方法解决：

方法1：给图片添加垂直居中样式 #

直接通过img_tag过滤器为图片添加vertical-align: middle样式，利用行内元素的垂直对齐属性实现居中：

<body>
  <table data-mce-fragment="1" width="100%" height="100%">
    <tbody>
      <tr>
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/windows-logo.png'| img_tag: 'Windows Compatible Operating Systems', style: 'vertical-align: middle;' }} &nbsp;<b>Windows Compatible Operating Systems</b><br><br>
        {{ product.metafields.custom.windows_compatible_operating_systems_3_0 }}
        </td>
        
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/mac-logo.png?v=1707807667'| img_tag: 'Mac Compatible Operating Systems', style: 'vertical-align: middle;' }} &nbsp;<b>Mac Compatible Operating Systems</b><br><br>
        {{ product.metafields.custom.mac_compatible_operating_systems_3_0 }}
        </td>
      </tr>
    </tbody>
  </table>
</body>

方法2：使用Flex布局包裹图片与标题 #

将图片和标题放入一个flex容器，通过align-items: center实现垂直居中，这种方式兼容性更好，也更灵活：

<body>
  <table data-mce-fragment="1" width="100%" height="100%">
    <tbody>
      <tr>
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >
          <span style="display: flex; align-items: center; gap: 8px;">
            {{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/windows-logo.png'| img_tag: 'Windows Compatible Operating Systems' }}
            <b>Windows Compatible Operating Systems</b>
          </span>
          <br><br>
          {{ product.metafields.custom.windows_compatible_operating_systems_3_0 }}
        </td>
        
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >
          <span style="display: flex; align-items: center; gap: 8px;">
            {{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/mac-logo.png?v=1707807667'| img_tag: 'Mac Compatible Operating Systems' }}
            <b>Mac Compatible Operating Systems</b>
          </span>
          <br><br>
          {{ product.metafields.custom.mac_compatible_operating_systems_3_0 }}
        </td>
      </tr>
    </tbody>
  </table>
</body>

说明 #

• 方法1适合简单场景，仅需修改图片样式即可生效；
• 方法2通过flex布局，不仅能实现垂直居中，还能通过gap属性灵活控制图片与标题的间距，布局更可控。

内容的提问来源于stack exchange，提问作者user23395528