Why cant I center my image inside my div? my div is centered the image is not
Question
I have a lowerbody div with an image in it but it will not center itself. I have tried mulitple different ways but nothing has worked. I know I probably just have the coding in the CSS wrong but I just cant figure it out. Im new to this and Im trying to trouble shoot on my own to learn but this one has me confused. Ant help would be appreciated.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="dereke.css"/>
<title>
</title>
</head>
<body>
<div class="Header">
<p>Ohio State Buckeyes</p>
<div id="logo">
<img src="http://vignette2.wikia.nocookie.net/logopedia/images/6/6f/1000px-Ohio_State_Buckeyes_logo_svg.png/revision/latest?cb=20130425230958" />
</div>
<div id="navbar">
<ul>
<li>Home</li>
<li id="noUD">|</li>
<li>About Us</li>
<li id="noUD">|</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="leftbody">
<img src="http://printableteamschedules.com/images/collegefootball/ohiostatebuckeyesfootballschedule.gif" />
</div>
<div id="rightbody"></div>
<div id="lowerbody">
<img src="http://grfx.cstv.com/schools/osu/graphics/facilities/stadium-night-800x325.jpg" />
</div>
<div class="footer"></div>
</body>
</html>
CSS
.Header {
width: calc(100%-16px);
height: 150px;
border-radius: 5px;
}
.Header p {
color: white;
margin-top: -5px;
width: 600px;
font-size: 70px;
}
.MidBody {
background-color: #141414;
width: 100%;
height: 850px;
margin-top: 10px;
border-radius: 5px;
position: relative;
display:block;
}
.footer {
bottom: 0;
height:50px;
width: 100%;
margin-top: 10px;
background-color: #CCCCCC;
border-radius: 5px;
clear:both;
position:relative;
}
#leftbody {
width: 49%;
height: 425px;
left: 0;
margin-top: 3px;
margin-left: 3px;
position: relative;
z-index: 1;
border-radius: 5px;
float:left;
}
#leftbody img {
width: 490px;
height: 420px;
border-radius: 5px;
margin-top: 2px;
margin-left: 2px;
}
#rightbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
margin-top: 3px;
margin-right: 3px;
position: relative;
z-index: 1;
border-radius: 5px;
float:right;
}
#lowerbody {
width: 100%;
height:auto;
left:0;
right:0;
margin-left: auto;
margin-right: auto;
postion: relative;
display:block;
}
#lowerbody img {
position:relative;
border-radius: 5px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
body {
background-color: black;
}
li {
display: inline;
padding: 1px;
text-decoration: underline;
}
#navbar {
width: 350px;
color: #F8F8F2;
font-family: Arial Black;
margin: -35px;
text-align: left;
line-height: 10px;
}
#noUD {
text-decoration: none;
}
#logo img {
margin-top: -150px;
margin-right: 50px;
width: 15%;
height: 15%;
float: right;
}
2 answers
solution1
0 2016-03-13 01:37:50
Try changing it from a block to an inline block in the lowerbody div. In your CSS sheet change display:block; to display:inline-block; in #lowerbody
Edit: This assumes you are putting something on either side of the img at some point (ie text)
solution2
0 ACCPTED 2016-03-13 01:55:46
在“ #lowerbody”中添加“ text-align：center”
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.