1

I am trying to center a div with a width of 1000px and then within said div align a piece of text 10px from the left edge and align an image directly in the middle, but I am having trouble. The text is pushed off the left of the screen and the image is situated to the left of the screen.

I don't understand what I've done wrong here. I'm sure the solution is mind-bogglingly obvious, and I'm just being thick.

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

2 Answers 2

0

if you set position:absolute you cant set margin-left: auto; and margin-right: auto; for that element. so

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

Just remove position:absolute from this class img.header

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

fiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.