Question

这是一个我遇到很多麻烦的问题：我无法将我的div正确放在我的网页上。情况如下：我试图居中的div是另一个div。经过大量的研究和数百种失败的方法，我设法把它集中起来。然而，当我然后使视口小于div时，它突然不再居中并浮动到左边。我只在div中使用无序列表（导航）时遇到此问题。

以下是我的网页代码（简化）和JSBin：

<body>
    <div id="container">
        <header id="topheader">
            ...
        </header>
        <div id="content">
            ...
            <div id="images">
                <ul>
                    <li><a href="#"><img src="..."></a></li>
                    <li><a href="#"><img src="..."></a></li>
                    <li><a href="#"><img src="..."></a></li>
                    <li><a href="#"><img src="..."></a></li>
                </ul>
            </div>
            ...

        </div>
    </div>
</body>

问题在于图像div。页面上的其他地方也有类似的东西。

我的问题是：为什么要这样做，怎么解决？

Answer 1

margin:0 auto;中心是div，而不是内容......我的意思是说，如果div 60px宽30px且内容只有align宽，然后div将对齐到中心，但内容仍然text-align到div的一侧，而不是在中心，给出一个视图div不居中.....我的建议是使用使用margin

的border属性

请参阅此 DEMO 并注意#content { width:98%; margin:0 auto;/*center div*/ border:1px solid #000; } #images { width:98%; margin:0 auto;/*center div*/ border:1px solid #CCC; text-align:center /*center text*/ }以了解div是居中的......但内容不是〜

<强> CSS

{{1}}

无法正确居中

1 个答案: