我正在尝试创建这样的东西:
更具体地说，我有一张图片要放在中间(水平和垂直)，还有一张图片要根据屏幕尺寸调整大小，如上图所示。问题和我的问题是如何使用 % 调整高度和宽度的大小，同时将它们对齐在中间(水平和垂直)，所有这些都在 <a> 中。标签。
这是我到目前为止设法编写的代码:
<!DOCTYPE html>
<html>
<body>
<a id="demo" style="text-align:center;display:block;vertical-align:middle;" class="btn" href="#Modal"><img src="https://media2.wnyc.org/i/620/372/l/80/1/blackbox.jpeg"></a>
</body>
</html>
我实际上已经尝试了很多我为 <img> 看到的东西或 <a>对齐，但没有一个对我有用。我认为这是因为我两者都有。我也使用 Bootstrap 。你能帮助我吗？提前致谢。
最佳答案
您需要以 % 为单位给出图像宽度值。并从所有方向锚定在中心:
查找 fiddle demo
HTML:
<a id="demo" class="btn absoluteCenter" href="#Modal"><img src="https://media2.wnyc.org/i/620/372/l/80/1/blackbox.jpeg"></a>
CSS:
.absoluteCenter{
display:inline-block;
position:absolute;
text-align:center;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.absoluteCenter img{
width:50%;
}
关于html - 图像 <a> 垂直和水平居中对齐并在两者中都使用 % 调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32547639/