Image not in the right place[HTML/CSS]
Question
I want that my image(near-logo.png) be in header-content div, which is in header div. Image at the moment is in the left side, but it has to be in the left side of header-content div. header div is 100% width, header-content div is 946px width.
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="header">
<div class="header_content">
<img src="img/near-logo.png"/>
</div>
</div>
</body>
</html>
body {
margin:0;
padding:0;
}
#header {
background-color:#353C3E;
height:80px;
width:100%;
position:relative;
}
.header-content {
width:946px;
position:absolute;
margin:0 auto;
}
3 answers
solution1
1 2014-03-21 10:25:23
I see two problems:
First thing, you have a mistake in your CSS, your class in your div is <div class="header_content"> but in your CSS it's .header-content .
Second thing, delete the position: absolute attribute if you want your header content centered.
solution2
0 2014-03-21 10:25:36
The image is aligned to the left of the div header_content . The problem is the div class name in your html is header_content and the name you have used is header-content in your css.
The other thing is you have used position:absolute for header_content , so that the margin:0 auto won't get applied, so remove the absolute position. Use the below code
.header_content {
width:946px;
position:absolute; // Remove this line
margin:0 auto;
}
solution3
0 2014-03-21 10:27:44
add
.header_content {
position:absolute;
left: 0; top: 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.