對齊集中對齊的div中的兩個塊

我想中心一個寬度爲1000px的div，然後在該div內對齊一段距離左邊緣的文本10px，並直接在中間對齊圖像，但我有麻煩。文本被推出屏幕左側，圖像位於屏幕左側。對齊集中對齊的div中的兩個塊

我不明白我在這裏做錯了什麼。我相信這個解決方案令人難以置信，而且我正在變得越來越厚。

<!DOCTYPE html> 
<html> 
<head> 
<style> 

body { 
margin: 0; 
padding: 0; 
background-color:red; 
} 

div#headerinner { 
position: relative; 
margin-left: auto; 
margin-right: auto; 
width: 1000px; 
} 

img.header { 
position:absolute; 
display: block; 
margin-left: auto; 
margin-right: auto; 
} 

span#login { 
position: absolute; 
left: 10px; 
} 

</style> 
</head> 
<body> 
<div id="headerinner"> 
<span id="login">Welcome!</span> 

<img class="header" src="mysite/heading.png" alt="Header"> 

</div> 

</body> 
</html>

來源

2014-07-05 Camarellini Viberg

如果你設置position：absolute你不能設置margin-left：auto;和margin-right：auto;爲那個元素。所以

img.header { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
      }

來源

2014-07-05 11:11:42 Arunkumar

刪除position:absolute謝謝！我沒有意識到這一點！ –

正是從這個classimg.header

img.header { 
    /*position:absolute;*/ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

fiddle

來源

2014-07-05 11:12:56

對齊集中對齊的div中的兩個塊

回答

相關問題