如何在頁面上居中顯示這些圖像？

我正在製作一個正在建設中的頁面，其中包含一張背景圖片和兩張我在Photoshop中製作的圖片。他們在說「我們正在建設中」和「Quinncuatro Productions的產品」。現在一切都完美地顯示在頁面上，但圖像真的好像在網頁的左側擁抱。這就是我現在所擁有的。我最簡單的想法是現在在風格標籤。我的第一個和第二個想法在標題註釋中。難道我做錯了什麼？如何在頁面上居中顯示這些圖像？

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Think Klinck</title> 
<style> 
body{ 
background-image:url('metalBackground.jpg'); 
} 
img{ 
margin-left:auto; 
margin-top:auto; 
} 

/*This was the first idea that I had: 
.UnderConstruction{ 
align:center; 
margin-left:auto; 
margin-top:auto; 
} 
.Q4Productions{ 
align:center; 
margin-left:auto; 
margin-top:auto; 

And this was my second: 
div.center{ 
margin-left:auto; 
margin-top:auto; 
} 
*/ 
</style> 
</head> 

<body> 

<div id="UnderConstruction" class="center"> 
<img src="UnderConstruction.gif" alt="ThinKlinch.com is regretfully under construction."> 
</div> 

<div id="Q4Productions" class="center"> 
<img src="Q4Productions.gif" alt="A product of Quinncuatro Productions."> 
</div> 

</body> 
</html>

來源

2012-10-13 Henry Edward Quinn IV

#UnderConstruction,#Q4Productions{ 
    text-align:center; 
}

或者

.center{ 
    text-align:center; 
}

這的div內的中心圖像。

來源

2012-10-13 21:02:11 j08691

Aaaaand我覺得啞巴。非常感謝，陌生人。當我允許的時候，我會在11分鐘內發佈你的答案。 –

如何在頁面上居中顯示這些圖像？

回答

相關問題