Question

我需要将图像正确地置于横幅内。水平和垂直居中。

这是我制作的jsfiddle。按钮的中心必须位于垂直红线之间，并且也必须垂直居中。

  <table  width="100%"  border="0px" style="background:transparent">
   <tr>
    <td height="305px">
   <div style="text-align:center;">
    <a href="#" class="botonConocer"  >Conocer más</a>
    </div>
    <img src="img/Grass.jpg" style="width:100%;height:305px" class="img-responsive" />



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

Answer 1

如果您的按钮已经在css中绝对定位，您可以添加此样式以使其显示在中间

.botonConocer {
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -82px;
}

在边距中你将它设置为负数，等于你的高度的一半和宽度的一半，然后它将在中间显示它相对于的位置，所以如果你想让它出现在容器的中间，你应该把它添加到你的容器

.container {position: relative}

这是JSFIDDLE

中的结果

如何在图像横幅内垂直和水平居中链接按钮

1 个答案: