html - Div 拒绝居中

标签 html css

这个问题应该可以在这个链接上实时看到(在每个页面上,因为页面的主要内容包含在我的“内容”div 中):http://tucsonbagley.com/index.html

“内容”类(一个容器 div)左侧的边距比右侧大得多,在浏览了我令人作呕的 CSS 之后,我就是想不通为什么。我肯定弄坏了一些东西(不久前它还可以工作!),但我就是想不通是什么。

如果我删除我的 id Navbar 或 id Header div,Content 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>

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

最佳答案

添加 <div style="clear:both"></div>之前.content div并申请 display:block.content而不是 display:inline-block就是这样

关于html - Div 拒绝居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23668604/

相关文章:

html - 在 CSS 代码中添加字体边框

HTML + CSS 标签栏

html - Bootstrap : align element to bottom doesn't work

javascript - 如何将计数器变量从数字更改为字母?

html - HTML 中的清除表单按钮……我们真的需要这个吗?

javascript - 如果隐藏,则单击时反转动画

css - 是否有 CSS 父级选择器?

javascript - lightbox2 图片库根本不起作用

javascript - Chrome 在事件被阻止后显示目标链接

html - 用 CSS 打印 DIV