对齐集中对齐的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中的两个块

回答

相关问题