如何居中圖像

我有一個網站，其中有一個圓形圖像。如何居中圖像

我想要的圖像是在所有的時間中心。（小/中/大屏幕）

要清除它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>

請幫我！

來源

2017-05-10 Babalu Pandey

要將圓圖像添加規則：

transform: translate(-50%, -50%);

來源

2017-05-10 17:30:18 j08691

添加transform: translate(-50%, -50%);到現有的樣式.circle。

這使您的圖像垂直和水平居中。

來源

2017-05-10 17:31:09 kwiat1990

將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>

很高興幫助你。

來源

2017-05-10 17:52:00

也許添加以下內容到你的CSS可以幫助，如果我猜中了：

-webkit-align-items: center; 
align-items: center; 
-webkit-justify-content: center; 
justify-content: center;

來源

2017-05-10 17:54:41

如何居中圖像

回答

相關問題