image - div中的中心图像

Question

我环顾四周并尝试了将图像居中的建议，它通常工作得很好，但我遇到了一些不正确的情况。

如果你去测试页面： http ://www.503rephotography.com/_temp/ - 你会看到图像被推到右边一点，如果你增加或减少你的屏幕尺寸，你会看到它可能会稍微远离中心位置。

我是 CSS 新手，可能有一些东西搞砸了，这使它不起作用；我在这里使用了一些技巧来使带有页面内容的 div 有点居中。现在我只是想在那个 div 框中居中一个图像。任何帮助深表感谢！！

Answer 1

您必须创建一个 div 容器margin-left:auto:并将margin-right:auto;内容居中。

<div id="container">
            <div id="header">
                <h1 id="logo">
                    <a href="http://www.503rephotography.com">
                        <img src="images/logo.png" alt="503 rephotography">
                    </a>
                </h1>
                <ul class="navbar">
                    <li class="button"><a href="#">SERVICES</a></li>
                    <li class="button"><a href="p.html">PORTFOLIO</a></li>
                    <li class="button"><a href="#">CONTACT 503</a></li>
                </ul>
            </div>
            <div id="topbar"></div>
            <div id="content">
                <img src="http://www.503rephotography.com/_temp/slides/1.jpg">
                <div class="sub">
                    <p>Content will go here....why can't I get this div box to be centered???</p>
                </div>
            </div>
        </div>

试试这个小提琴看看它是否是你需要的：http: //jsfiddle.net/ftPa3/