我有一个网站，其中有一个圆形图片。
我希望该图像始终位于中心。(小/中/大屏幕)
清除它visit .
代码在这里:-
<html>
<head>
<title>
Maintenance in Progress
</title>
<style>
.timer {
text-align: center;
font-size: 60px;
color: white;
position: absolute;
right: 500px;
bottom: 0;
}
body {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.utxt{
position: absolute;
}
.circle{
position: absolute;
top: 50%;
left: 50%;
}
.dtxt{
position: absolute;
bottom: 0;
}
</style>
</head>
<body background="maintenance/bg.png">
<img class="utxt" src="maintenance/utxt.png"></img>
<img class="circle" src="maintenance/circle.png"></img>
<img class="dtxt" src="maintenance/dtxt.png"></img>
<div class="timer" id="demo"></div>
</body>
</html>
请帮帮我!
最佳答案
将 transform: translate(-50%, -50%); 添加到您现有的 .circle 样式中。
.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这里有完整的代码和更新。
<html>
<head>
<title>
Maintenance in Progress
</title>
<style>
.timer {
text-align: center;
font-size: 60px;
color: white;
position: absolute;
right: 500px;
bottom: 0;
}
body {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.utxt{
position: absolute;
}
.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dtxt{
position: absolute;
bottom: 0;
}
</style>
</head>
<body background="maintenance/bg.png">
<img class="utxt" src="maintenance/utxt.png"></img>
<img class="circle" src="maintenance/circle.png"></img>
<img class="dtxt" src="maintenance/dtxt.png"></img>
<div class="timer" id="demo"></div>
</body>
</html>
很高兴为您提供帮助。
关于html - 如何使图像居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43899126/