在中间以内容为中心的简单DIV CSS_Css_Html_Center_Footer

在中间以内容为中心的简单DIV CSS

css html

在中间以内容为中心的简单DIV CSS,css,html,center,footer,Css,Html,Center,Footer,嘿，我是一个css新手，但我知道这应该很容易。如果有人能很快帮我，这样我就不会在试图弄明白这件事时伤脑筋了，那就太好了只有2项我需要帮助放置一个400x200px的图像，我总是希望在中心（垂直和水平），这将是内容。及一行文字，我想在底部居中，这将是页脚提前谢谢如果我理解你的要求，我认为你应该尝试在css中使用边距，这确实是一种方法居中 IMG.image1{ 位置：绝对位置；左：50%；最高：50%；左边距：-200px；利润上限：-100px } #页脚{ 位置：固定；

嘿，我是一个css新手，但我知道这应该很容易。如果有人能很快帮我，这样我就不会在试图弄明白这件事时伤脑筋了，那就太好了

只有2项我需要帮助放置

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

提前谢谢

如果我理解你的要求，我认为你应该尝试在css中使用边距，这确实是一种方法


居中
IMG.image1{
位置：绝对位置；
左：50%；
最高：50%；
左边距：-200px；
利润上限：-100px
}
#页脚{
位置：固定；
底部：0；
文本对齐：居中；
宽度：100%；
}
页脚

你的总图像高度和宽度减半，使其为负数，因此宽度为（左边距：-200px；），顶部为（右边距：-100px；）

CSS中确实没有垂直居中的概念。抱怨已经很久了。选项：

你可以用一张桌子。我觉得这是一个不错的定位使用之一
您可以使用JavaScript。获取窗口的高度，做一些数学运算，然后定位图像。有点乱。也许比它的价值更多的努力
您可以使用display:table CSS。唉，这在艾菲尔克不起作用
你可以假装一下。给图像一个150px的上边距，并且底部空间是可变的。这就是我要走的路线。实用设计

我认为您必须更具体地获得回复。你希望你的形象处于什么中心。。那一页？潜水艇？文本也一样。这就是页面上的全部内容，还是还有其他项目？你应该提供你当前使用的不起作用的代码。你能把你尝试过的内容和截图（如果可能）放在什么内容的中心吗？那一页？集装箱？如果是后者，容器的宽度和高度是固定的，还是需要展开/收缩以适应不同的内容或视口宽度或容器的父宽度？您是否需要让文本或其他项目围绕此图像“流动”，或者它是像灯箱一样的覆盖？您的答案取决于所有这些考虑因素。谢谢您的快速回复。我不想在页面上除了图像和页脚以外的任何东西，所以它非常基本。只有图像在水平和垂直方向的中心，以及底部的页脚。就这样。我想我正在努力解决的问题是，无论使用何种屏幕分辨率，图像居中，页脚在底部。#页脚可以是position:absolute或position:fixed。无论哪种方法都可以。所要完成的就是将图像水平居中。与相同的功能。修复了现在理解您的说法：我第一次看到有人在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>