如何将图像与单行文本的函数居中,php?

ogq8wdun  于 2023-04-28  发布在  PHP
关注(0)|答案(1)|浏览(95)

目前,按照我编写代码的方式,图像与太高的文本对齐。我想把它和正文放在一起。这是它现在的样子。其他的一切都是居中的权利和我如何喜欢它,除了图像。有没有办法给予它一个负边距或图像填充来降低图像更多或其他东西?新的编码,所以不知道如何做到这一点。
example image of how it currently looks with code written below
example image of how I want it to look
这是我目前拥有的与示例图像配套的代码。

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);
yshpjwxd

yshpjwxd1#

使用以下代码代替函数中的两个echo语句。

echo '<div style="display: flex; align-items: center; justify-content: center;">
    <img src="https://e-z-hook.com/wp-content/uploads/2023/04/Prop-65-Warning-Label-transparent-background.png"
         style="height: 40px; width: 40px; margin-right: 15px;"/>
    <p>
        <b> 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>
</div>';

上面的代码使用flex box来对齐项目。要更改图像和文本之间的间距宽度,请在代码margin-right: <desired width>px;中更新以下内容。

相关问题