如何在functions.php中实现图片与单行文本垂直居中对齐？

我写的代码里图片和文本对齐位置偏高，想实现图片与文本垂直居中，除了图片之外其他内容布局都没问题。想问能不能通过负边距、图片内边距这类方式调整图片位置？我刚接触编码，不知道具体怎么操作。

当前效果：图片明显高于文本基线，和旁边的"WARNING"文字不在同一水平中线
预期效果：图片和文本垂直居中对齐，视觉上在同一高度

当前使用的代码：

function add_text_in_between(){
    echo '&nbsp; &nbsp; &nbsp; <img src="https://e-z-hook.com/wp-content/uploads/2023/04/Prop-65-Warning-Label-transparent-background.png", width="40" height="40"/>'; 
    echo '<b> &nbsp; &nbsp; WARNING: </b> Cancer and Reproductive Harm - <a href="https://www.P65Warnings.ca.gov"> www.P65Warnings.ca.gov</a>, see E-Z-Hooks website for more information on <a href="https://www.e-z-hook.com/compliance/"> California Proposition 65</a> <p style="margin-top: 20px"> </p>';
}
add_action('woocommerce_product_after_tabs', 'add_text_in_between', 20);

方法1：给图片加vertical-align: middle样式（最推荐） #

直接在img标签里加style属性，设置垂直对齐为middle，这是行内元素居中对齐的标准方式，不需要手动调边距：

function add_text_in_between(){
    echo '&nbsp; &nbsp; &nbsp; <img src="https://e-z-hook.com/wp-content/uploads/2023/04/Prop-65-Warning-Label-transparent-background.png" width="40" height="40" style="vertical-align: middle;"/>'; 
    echo '<b> &nbsp; &nbsp; WARNING: </b> Cancer and Reproductive Harm - <a href="https://www.P65Warnings.ca.gov"> www.P65Warnings.ca.gov</a>, see E-Z-Hooks website for more information on <a href="https://www.e-z-hook.com/compliance/"> California Proposition 65</a> <p style="margin-top: 20px"> </p>';
}
add_action('woocommerce_product_after_tabs', 'add_text_in_between', 20);

注：顺便去掉了img标签里width属性前多余的逗号，避免语法问题。

方法2：用负边距调整（满足你提到的需求） #

如果想用负边距，给图片加margin-top负值把图片往下拉，数值可以根据实际效果微调，比如：

function add_text_in_between(){
    echo '&nbsp; &nbsp; &nbsp; <img src="https://e-z-hook.com/wp-content/uploads/2023/04/Prop-65-Warning-Label-transparent-background.png" width="40" height="40" style="margin-top: 8px;"/>'; 
    echo '<b> &nbsp; &nbsp; WARNING: </b> Cancer and Reproductive Harm - <a href="https://www.P65Warnings.ca.gov"> www.P65Warnings.ca.gov</a>, see E-Z-Hooks website for more information on <a href="https://www.e-z-hook.com/compliance/"> California Proposition 65</a> <p style="margin-top: 20px"> </p>';
}
add_action('woocommerce_product_after_tabs', 'add_text_in_between', 20);

这种方法需要自己测试合适的数值，通用性不如vertical-align，但也能达到效果。

方法3：用内边距调整（不推荐） #

内边距padding-top也能让图片视觉下移，但会增加图片元素的整体高度，可能影响周围布局，所以不优先推荐，示例：

function add_text_in_between(){
    echo '&nbsp; &nbsp; &nbsp; <img src="https://e-z-hook.com/wp-content/uploads/2023/04/Prop-65-Warning-Label-transparent-background.png" width="40" height="40" style="padding-top: 8px;"/>'; 
    echo '<b> &nbsp; &nbsp; WARNING: </b> Cancer and Reproductive Harm - <a href="https://www.P65Warnings.ca.gov"> www.P65Warnings.ca.gov</a>, see E-Z-Hooks website for more information on <a href="https://www.e-z-hook.com/compliance/"> California Proposition 65</a> <p style="margin-top: 20px"> </p>';
}
add_action('woocommerce_product_after_tabs', 'add_text_in_between', 20);

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