怎么才能让按钮在图片下方居中位置,而不是统一的都在最左侧

图片的代码是,图片采用的是网络图片地址

<table><tr>
<td><img src=https://jiuyihuace.oss-cn-shenzhen.aliyuncs.com//uploads/20210415/d97eb4aec0bdaa275b225b34d69af070.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_80/watermark,image_dXBsb2Fkcy8yMDIxMDEwOC8zNzUyOTQxODMyZDRjYmY4ZjEwYWNhNmMzZmJlNzU1MS5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yNQ==,x_28,y_28,q_90/watermark,text_OFkzMzQ=,size_20,g_nw,x_30,y_30 border=0></td>
   
<td><img src=https://jiuyihuace.oss-cn-shenzhen.aliyuncs.com//uploads/20210415/662db73f4b3d68673d153fa58102f258.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_80/watermark,image_dXBsb2Fkcy8yMDIxMDEwOC8zNzUyOTQxODMyZDRjYmY4ZjEwYWNhNmMzZmJlNzU1MS5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yNQ==,x_28,y_28,q_90/watermark,text_OEcxOTY=,size_20,g_nw,x_30,y_30 border=0></td>

</tr></table>

按钮的代码是,按钮中的链接采用的是带连接的

{abtn icon="" color="#ff6800" href="https://720yun.com/t/6evkcb1h7qq?scene_id=68867377" radius="17.5px" content="720度全景展示"/}{abtn icon="" color="#ff6800" href="https://720yun.com/t/6evkcb1h7qq?scene_id=68867377" radius="17.5px" content="720度全景展示"/} 

 

<table>
        <tr>
            <td>
                <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
                    <img src=https://jiuyihuace.oss-cn-shenzhen.aliyuncs.com//uploads/20210415/d97eb4aec0bdaa275b225b34d69af070.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_80/watermark,image_dXBsb2Fkcy8yMDIxMDEwOC8zNzUyOTQxODMyZDRjYmY4ZjEwYWNhNmMzZmJlNzU1MS5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yNQ==,x_28,y_28,q_90/watermark,text_OFkzMzQ=,size_20,g_nw,x_30,y_30 border=0>
                    <a  href="https://720yun.com/t/6evkcb1h7qq?scene_id=68867377">720度全景展示</a>
                </div>
            </td>
            <td>
                <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
                    <img src=https://jiuyihuace.oss-cn-shenzhen.aliyuncs.com//uploads/20210415/662db73f4b3d68673d153fa58102f258.jpg?x-oss-process=image/auto-orient,1/interlace,1/quality,q_80/watermark,image_dXBsb2Fkcy8yMDIxMDEwOC8zNzUyOTQxODMyZDRjYmY4ZjEwYWNhNmMzZmJlNzU1MS5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yNQ==,x_28,y_28,q_90/watermark,text_OEcxOTY=,size_20,g_nw,x_30,y_30 border=0>
                    <a  href="https://720yun.com/t/6evkcb1h7qq?scene_id=68867377" >720度全景展示</a>
                </div>

            </td>
        </tr>
    </table>

 

采用flex布局,参考http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

楼上老哥都直接代码给你写出来了,按自己需要稍微改一下就好啦。。

看你的代码,两个按钮应该是没有在table标签里面的,那么可以考虑

<div style="width: 100%">
    <div style="width: 50%; text-align:center">放按钮</div>
    <div style="width: 50%; text-align:center">放按钮</div>
</div>

因为你的图片各占50%的宽度,所以可以在下方用50%的div容器包裹,然后通过text-align: center 让文字类型的居中,或者你可以设置

<div class="test" style="width: 50%;">放按钮</div>
.test{
    display: flex;
    align-items: center; // 使内容垂直居中
    justify-content: center; // 使内容水平居中
}