Question

应该可以在此链接上看到问题（在每个页面上，因为页面的主要内容包含在我的＆＃34;内容＆＃34; div中）：http://tucsonbagley.com/index.html

＆＃34;内容＆＃34; class（容器div）左边的边距比右边的边缘大得多，在浏览了我的CSS广告之后，我只是弄清楚原因。我肯定打破了一些东西（它不久前就开始工作了！），但我无法弄清楚是什么。

如果我删除了我的ID导航栏或ID标题div，则内容div将默认返回左侧...是的，此时我已经丢失了。

有问题的CSS：

.content{
    display:inline-block;
    margin:0 auto;
    width: 68%;
    overflow:hidden;
    text-align: center;
    padding: 10px;
    background-color: #FFFFFF;
    font-size: 12px;
    border-radius: 10px 10px 10px 10px;
}

示例HTML：

<body>
    <div class="header">
        <p>Tucson Bagley</p>
    </div>

    <div id="socialmedia">
            <a href="https://twitter.com/BagelHero"><img src="images/Twitter_logo_blue.png"/></a>
            <a href="http://www.linkedin.com/in/tucsonbagley"><img src="images/linkedin.png"/></a>
            <a href="https://www.facebook.com/tucson.bagley"><img src="images/facebook.png"/></a>
    </div>

    <div id="header">
            <small>BagelHero@gmail.com</small>
    </div>
    <div id="navbar">
        <ul>
            <li><a href="index.html"><span>Gallery</span></a></li>
            <li><a href="about.html"><span>Resume/CV</span></a></li>
            <li><span>Contact me</span></li>
        </ul>
    </div>

    <div class="content">
        <div class="thumbleft"><h2>This is some content.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non varius metus. Pellentesque eu nunc tortor. Aliquam id lectus orci. Sed id consectetur eros. Curabitur semper nisl nibh, rhoncus lacinia nibh volutpat at. Pellentesque sollicitudin vitae ipsum ut dictum. Proin ac risus ac nisi interdum hendrerit. Pellentesque sodales mauris ac eleifend vehicula. Nulla convallis aliquet urna varius auctor. Donec eget ipsum ut mauris consequat auctor eget sit amet odio. Nullam sed lorem erat. Praesent consequat porttitor magna, sit amet feugiat odio tincidunt ut. Fusce congue eros vel quam condimentum, vel consectetur quam imperdiet. </p>
        </div>

    </br>

    <div id="copyright">
        <p>Copyright 2012-2014 | Tucson Bagley</p>
    </div>

</body>

一些帮助将不胜感激。提前谢谢！

Answer 1

将.content的css更改为

.content{
    position: absolute;
    left:0px;
    right:0px;
    display:inline-block;
    margin:10px auto;
    width: 68%;
    overflow:hidden;
    text-align: center;
    padding: 10px;
    background-color: #FFFFFF;
    font-size: 12px;
    border-radius: 10px 10px 10px 10px;
}

魔术是left:0px与right:0px和margin:10px auto相结合，只能在绝对模式下使用。

修改 - 根据评论更新了css。

Answer 2

在<div style="clear:both"></div> .content之前添加div并将display:block应用于.content而不是display:inline-block，而这就是

Div拒绝居中

2 个答案: