Html 如何使用css集中版权和图像？

我想集中我的版权和徽标（Windows徽标）。如何使用CSS在页面上居中显示这些内容。我以为我有正确的CSS，但它仍然显示在左边

看看我的JSFIDLE

Jsfiddle：

这是我的密码：

<div class="topbar">

---

首先，去掉

position:absolute

，如果希望在顶部栏中显示版权声明，则将其嵌套在相应的父元素中。您将希望将其嵌套在“topbar”中

我必须包括正确的行为

基本上，删除

绝对

定位并指定

顶栏

以使

文本对齐：居中

属性将使所有子文本元素居中，在这种情况下，您的版权归您所有

---

对于图像，我刚刚将其设置为

display:block

，并将其边距设置为

margin:0 auto将图像置于其父容器的中心
 首先，去掉
position:absolute
，如果希望在顶部栏中显示版权声明，则将其嵌套在相应的父元素中。您将希望将其嵌套在“topbar”中

我必须包括正确的行为

基本上，删除
绝对
定位并指定
顶栏
以使
文本对齐：居中
属性将使所有子文本元素居中，在这种情况下，您的版权归您所有

对于图像，我刚刚将其设置为
display:block
，并将其边距设置为
margin:0 auto将图像置于其父容器的中心
 版权只需添加
宽度：100%。您需要这样做，因为您已将元素设置为绝对值，因此如果希望“文本对齐”属性起作用，则必须定义宽度

对于图像，只需添加另一个文本对齐属性：

#logo {
    text-align:center;
}

对于版权，只需添加
宽度：100%。您需要这样做，因为您已将元素设置为绝对值，因此如果希望“文本对齐”属性起作用，则必须定义宽度

对于图像，只需添加另一个文本对齐属性：

#logo {
    text-align:center;
}

不能使用绝对位置的自动边距

如果你想定位你的版权，你实际上应该使用上页边距

它可能看起来像这样：

    .copyright{
        color:#232323;
        font-size:11px;
        margin: 18px auto 0 auto;
        position: relative;
        text-align: center;
    }

希望这有帮助
 不能使用绝对位置的自动边距

如果你想定位你的版权，你实际上应该使用上页边距

它可能看起来像这样：

    .copyright{
        color:#232323;
        font-size:11px;
        margin: 18px auto 0 auto;
        position: relative;
        text-align: center;
    }

希望这有帮助
 如果你想使用position:absolute作为版权，那么给div一个100%的宽度。对于图像，将其设置为“显示块”，并为其设置边距：0自动

#logo img {
display:block;
margin: 0 auto;
}
.copyright{
color:#232323;
font-size:11px;
margin: 0 auto;
position: absolute;
top: 18px;
text-align: center;
width:100%
}

这里有一个更新的
如果你想使用版权的位置：绝对。然后给div一个100%的宽度。对于图像，将其设置为“显示块”，并为其设置边距：0自动

#logo img {
display:block;
margin: 0 auto;
}
.copyright{
color:#232323;
font-size:11px;
margin: 0 auto;
position: absolute;
top: 18px;
text-align: center;
width:100%
}

这是一个更新的
没问题，只需使用平移和绝对定位：

img{
  position: absolute;
  left: 50%;  
  transform: translate(-50%, 0);
}

这里发生的事情是，您的图像从屏幕的一半开始（
左：50%
）。问题是图像太右了，所以你把它翻译回50%（这是指元素的宽度）

您也可以使用此选项在垂直轴上居中，使用
top:50%
和
translate（x，-50%）

这已经超出了您的需要，但是您可以在
中看到正在工作的翻译。加载
没问题，只需使用翻译和绝对定位：

img{
  position: absolute;
  left: 50%;  
  transform: translate(-50%, 0);
}

这里发生的事情是，您的图像从屏幕的一半开始（
左：50%
）。问题是图像太右了，所以你把它翻译回50%（这是指元素的宽度）

您也可以使用此选项在垂直轴上居中，使用
top:50%
和
translate（x，-50%）

这已经超出了您的需要，但是您可以在
中看到正在工作的翻译。加载
我更正了您的DOM实现和CSS

这是JSFIDLE


CSS

HTML


版权及副本；2014年微软
我更正了您的DOM实现和CSS

这是JSFIDLE


CSS

HTML


版权及副本；2014年微软
是否有任何特定原因您的
。版权
标记不在
内。当它看起来像是您希望它出现的地方时，topbar
内？是否有任何特定原因您的
。版权
标记不在
内。当它看起来像是您希望它出现的地方时，topbar
内？边距值如下：顶部、右侧、底部，左边。边距值如下：上、右、下、左。