Question

我使用此CSS代码在页面中央显示图像：

      .img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        position:relative;
         }

      .btn{
       position:absolute;
       margin-top:10%;
       margin-left:-27%;
         }

HTML：

    <img src="12345.png" class="img"></img>
        <a href="http://google.ro"><img src="pin.png" class='btn' width="30px" height="48px" alt="http://google.ro" ></img><a>
        <a href="http://google.ro"><img src="pin.png" class='btn1' width="30px" height="48px" alt="http://google.ro" ></img><a>
        <a href="http://google.ro"><img src="pin.png" class='btn2' width="30px" height="48px" alt="http://google.ro" ></img><a>

如何在图像上显示3个也是图像的标签？在我添加 display：block 之前，它工作得很好。

Answer 1

＆＃13;

<div style="position:relative">
<img src="12345.png" class="img"></img>
<div style="position:absolute">

        <a href="http://google.ro"><img src="pin.png" class='btn' width="30px" height="48px" alt="http://google.ro" ></img><a>
        <a href="http://google.ro"><img src="pin.png" class='btn1' width="30px" height="48px" alt="http://google.ro" ></img><a>
        <a href="http://google.ro"><img src="pin.png" class='btn2' width="30px" height="48px" alt="http://google.ro" ></img><a>

</div>


</div>

＆＃13;

试试这个......会更好地帮助你......

Answer 2

您是否尝试在整体div上显示flex。如果您没有图像的整体div，我会添加一个并将其设置为显示：flex;如果你想在第一个图像前添加图像，请添加z-index：-1;到第一张图片。我是CSS的新手，但我相信这会奏效。

＆＃13;

.spacing {
  display: flex;
}

＆＃13;

<div class="spacing">
  <img src="12345.png" class="img"></img>
  <a href="http://google.ro"><img src="pin.png" class='btn' width="30px" height="48px" alt="http://google.ro" ></img><a>
  <a href="http://google.ro"><img src="pin.png" class='btn1' width="30px" height="48px" alt="http://google.ro" ></img><a>
  <a href="http://google.ro"><img src="pin.png" class='btn2' width="30px" height="48px" alt="http://google.ro" ></img><a>
</div>

＆＃13;

      .img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        position:relative;
        z-index: -1;
         }

      .btn{
       position:absolute;
       margin-top:10%;
       margin-left:-27%;
         }

＆＃13;

使用Display：Block属性在图像上显示按钮

2 个答案: