我想将文本垂直和水平居中放置到图像中。我不在乎它是否是纯HTML / CSS。
到目前为止，我已经尝试过在StackOverflow上找到的以下解决方案：
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
<body>
<div class="image">
<img src="https://www.google.com/images/srpr/logo11w.png">
<h2>Text</h2>
</div>
</body>
尝试利用css :before伪元素，calc()
<!DOCTYPE html>
<html>
<head>
<style>
.image {
position: relative;
width: 100%;
/* for IE 6 */
}
.image:before {
position: absolute;
left: calc(538px / 2 - 12px);
top: calc(190px / 2 - 12px);
width: 24px;
content: "Text";
display: block;
font-size: 1.5em;
font-weight: bold;
}
</style>
</head>
<body>
<div class="image">
<img src="https://www.google.com/images/srpr/logo11w.png">
</div>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句