文章/答案/技术大牛

发布

社区首页 >问答首页 >简单的div css居中显示内容

问简单的div css居中显示内容
EN

Stack Overflow用户

提问于 2011-04-13 12:15:49

回答 2查看 1.5K关注 0票数 0

嘿，我是css新手，但我知道这应该很简单。如果有人能很快帮我，这样我就不会再弄得头破血流了，那就太好了。

只有2个项目，我需要帮助放置。

一个400x200px的图像，我总是想要在中心(包括垂直和水平)，这将是内容。还有一行我想要在底部居中的文本，那就是页脚。

提前谢谢。

css

html

center

footer

回答 2

Stack Overflow用户

发布于 2011-04-13 12:33:08

如果我理解你的要求，我认为你应该尝试一下，在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>

不管你的图片的总高度和宽度是减半还是负数，那么宽度应该是(左边缘：-200px;)，顶部是(右边缘：-100px;)

票数 2

Stack Overflow用户

发布于 2011-04-13 13:56:11

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

你可以用一张桌子。我发现这是一个可以用来定位的方法。

，

，你可以使用JavaScript。得到窗口的高度，做一些数学运算，然后定位图像。有点凌乱。你可以使用
：table CSS。遗憾的是，在IE AFAIK中不起作用。
，你可以假装的。将图像的上边距设置为150px，并且底部的空间是可变的。这就是我要走的路。实用的设计。;)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5644321

复制

相似问题

问简单的div css居中显示内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的div css居中显示内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的div css居中显示内容
EN