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;
}

Possible duplicate (edited): http://stackoverflow.com/questions/10989238/center-align-image-within-div-horizontally — tmarois, Mar 13 '16 at 01:23

ProphetofProfit · Answer 1 · 2016-03-13T01:39:55.703

0

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 (i.e. text)

edited Mar 13 '16 at 01:39

answered Mar 13 '16 at 01:37

ProphetofProfit

136
1
4
10

This is a really bad answer that is a horrible long term solution but have you tried just putting in the html code as many times as you want until the image is roughly centered? its a lame quick fix but it works for very simple stuff – ProphetofProfit Mar 13 '16 at 01:43
Oh no it will just be that picture! – Derek Edwards Mar 13 '16 at 01:43
Yes I can easily do that but I was looking for the right way to fix this so I know later how to fix it! Lol – Derek Edwards Mar 13 '16 at 01:44

score 0 · Accepted Answer · answered Mar 13 '16 at 01:55

0

Add "text-align: center" to #lowerbody

answered Mar 13 '16 at 01:55

Jason Fetterly

182
1
12

Wow that was easy I was overthinking it because it wasn't text. Thank you so much! – Derek Edwards Mar 13 '16 at 01:57

Why cant I center my image inside my div? my div is centered the image is not

2 Answers2