Question

我环顾四周并尝试了将图像居中的建议，它通常效果很好，但我遇到的情况不对。

如果你去测试页面： http://www.503rephotography.com/_temp/ - 您会看到图像被向右推一点，如果您增大或减小屏幕的大小，您会看到它可能会向中心位置移动一点距离。

我是CSS的新手，可能有一些搞砸了，这使得这个不起作用;我在这里使用了一些提示，使div与页面上的内容有点居中。现在我只是想在这个div框中居中一个图像。非常感谢任何帮助!!

Answer 1

您必须使用margin-left:auto:和margin-right:auto;创建一个div容器，以使内容居中。

<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/

div中的中心图像

1 个答案: