Question

我有2个图像作为链接在我的HTML页面中，我想在<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;
}

我强烈建议您阅读有关Flexbox的guide。它会帮助您了解Flexbox，它可以避免几个令人头疼的问题以DOM元素为中心。

这是一个工作片段。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

Answer 2

您还可以在锚点上使用flexbox将内容置于中心位置。

＆＃13;

<div align="center" id="img_container" style="margin-top: 150px;">
    <a href="#link">
        <img src="https://picsum.photos/300/300"  id="shortcode_icon" />
        <p> Some text </p>
    </a>

    <a href="#link">
        <img src="https://picsum.photos/300/300"  id="workorder_icon" />
        <p> another text </p>
    </a>
    <a href="#link">
        <img src="https://picsum.photos/300/300"  id="workorder_icon" />
        <p> another text that is a litte longer. </p>
    </a>
</div>

＆＃13;

defaultdict

＆＃13;

对齐图像下的文字

2 个答案: