为什么我不能将图片居中放置在div中？我的div居中图像不

Question

I have a lowerbody div with an image in it but it will not center itself. 我的下半部div中有图像，但它不会居中。 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. 我知道我可能只是CSS中的编码错误，但我无法弄清楚。 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 的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 的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;
}

Answer 1

Try changing it from a block to an inline block in the lowerbody div. 尝试在下半身div中将其从一个块更改为一个内联块。 In your CSS sheet change display:block; 在CSS工作表中更改display：block; to display:inline-block; 显示：inline-block; in #lowerbody 在#lowerbody中

Edit: This assumes you are putting something on either side of the img at some point (ie text) 编辑：这假设您在某个时候在img的任一侧都放了一些东西（即文本）

Answer 2

在“ #lowerbody”中添加“ text-align：center”

为什么我不能将图片居中放置在div中？我的div居中图像不

问题描述

2 个解决方案

解决方案1
0 2016-03-13 01:37:50

解决方案2
0 已采纳 2016-03-13 01:55:46

为什么我不能将图片居中放置在div中？ 我的div居中图像不

问题描述

2 个解决方案

解决方案1 0 2016-03-13 01:37:50

解决方案2 0 已采纳 2016-03-13 01:55:46

为什么我不能将图片居中放置在div中？我的div居中图像不

解决方案1
0 2016-03-13 01:37:50

解决方案2
0 已采纳 2016-03-13 01:55:46