html - 对齐图像下的文本

Question

我的 HTML 页面中有 2 个图像作为链接，我想在 <a> 中的每个图像下插入文本。标签是可点击的，所以我尝试了这段代码:

<div align="center" style="margin-top: 150px;">

    <a href="shortcode.php" style="padding-right: 50px;">
    <img src="img\logo_sh.gif" width="300" height="300"/>
    <p> Some text </p></a>

    <a href="workorder.php" style="padding-left: 50px;">
    <img src="img\logo_wo.gif" width="300" height="300"/>
    <p> another text </p></a>

</div>

但我遇到了这样的样式问题 Image我希望他们像这样位于中心 Image

Answer 1

尝试将此 CSS 添加到您的容器中:

#img_container {
  display: flex;
  flex-direction: row;
}

I highly recommend you to read this guide about Flexbox. It will help you to understand Flexbox and it will avoid several headaches while centering DOM elements.

这是一个工作片段。

#img_container {
    display: flex;
    flex-direction: row;
}

<div align="center" id="img_container" style="margin-top: 150px;">

    <a href="shortcode.php" style="padding-right: 50px;">
    <img src="img\logo_sh.gif" width="300" height="300"  id="shortcode_icon" />
    <p> Some text </p></a>

    <a href="workorder.php" style="padding-left: 50px;">
    <img src="img\logo_wo.gif" width="300" height="300"  id="workorder_icon" />
    <p> another text </p></a>

</div>

编辑:您也可以将其添加为内联样式。

<div align="center" id="img_container" style="margin-top: 150px; display: flex; flex-direction: row;">