html5带图片按钮,html5图片标签，图像中间的按钮

5 个答案:

答案 0 :(得分：1)

作为替代方案，您可以使用display: grid。我相信，它非常直接，反应灵敏，并得到了大多数主流浏览器的支持。

HTML

SOME IMPORTANT TEXT

CSS

.bookList {

position: absolute;

width: 50%;

border: solid;

display: grid;

grid-template-columns: 1fr auto 1fr;

grid-template-rows: 1fr auto 1fr;

}

img {

grid-column: 1 /4;

grid-row: 1/4;

width: 100%;

}

.btn-custom{

grid-column: 2;

grid-row: 2;

color:#fff;

border-color:#fff;

background:#000;

text-align: center;

margin-top: 20px;

}

RESULT

我对照片采取了一些自由，因为我不知道你在用什么。我希望你不要介意。

答案 1 :(得分：1)

您必须将按钮添加到容器中并将此容器置于绝对位置：

SOME IMPORTANT TEXT

.bookList {

width: 100%;

position: relative;

}

img {

width: 100%;

}

a {

position: relative;

display: block;

margin-top: 35%;

}

picture{

position: relative;

}

.bttn_container{

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

text-align: center;

}

.btn-custom{

color:#fff;

border-color:#fff;

background:#000;

text-align: center;

margin-top: 20px;

}

答案 2 :(得分：0)

只需将锚标记的位置设置为绝对，并按照您的意愿定位，如下所示：

a {

position: absolute;

top: 0;

left: 0;

max-width: 100%;

}

答案 3 :(得分：0)

你可以看到例子：

＆＃13;

＆＃13;

click here to this link＆＃13;＆＃13;＆＃13;

答案 4 :(得分：0)

div{

position:relative;

}

img{

width:100%;

height:300px;

}

button{

position:absolute;

top:50%;

left:50%;

background-color:#fff;

border:none;

height:30px;

width:100px;

}

HI

Click