Question

嘿，我是一个新手，但我知道这应该很容易。如果有人可以帮助我真的很快，所以我可以停止打破我的头，试图弄清楚这是伟大的。

我只需要2个项目需要帮助。

一个400x200px的图像，我总是想要在中心（垂直和水平），这将是内容。和我希望在底部居中的一行文本是页脚。

提前谢谢。

Answer 1

如果我明白你的要求我认为你应该尝试使用css内的边距真的是要走的路。 ;）

<html>
    <head>
        <title>Center</title>
            <style type="text/css">
            IMG.image1 {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -200px;
                margin-top: -100px
            }
            #footer {
            position: fixed;
            bottom: 0;
            text-align: center;
            width: 100%;
            }
        </style>

    </head>
    <body>  
        <div id="Centeredcontent">    
            <img class="image1" width="400px" height="200px"></img>
        </div>
            <div id="footer">Footer</div>
    </body>
</html>

你的总图像高度和宽度是一半并使其为负值，因此对于宽度，它将是（margin-left：-200px;），而对于top，它将是（margin-right：-100px;）< / p>

Answer 2

CSS中确实没有垂直居中的概念。这是一个很长时间的抱怨。选项：

您可以使用表格。我发现这可以用于定位。
您可以使用JavaScript。获取窗口的高度，做一些数学运算，然后定位图像。有点凌乱。也许比它的价值更多的努力。
您可以使用display：table CSS。唉，在IE AFAIK中不起作用。
你可以假装它。为图像提供150px的上边距，并且底部空间可变。那是我走的路。务实的设计。 ;）

简单的div css将中间内容集中在一起

2 个答案: