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

Question

我想将我的版权和徽标(Windows徽标)居中。如何使用CSS在页面上居中。我认为我有正确的CSS，但它仍然显示在左侧。

看看我的jsfiddle。

Jsfiddle：http://jsfiddle.net/huskydawgs/z9j9rsz2/27/

下面是我的代码：

<div class="topbar">

​

  <div id="logo">
    <img src="http://fc01.deviantart.net/fs71/f/2012/048/4/0/microsoft_windows_8_logo_by_pooterman-d4q0ub4.png" />
  </div>

版权所有©2014 Microsoft

这是我的css：

.topbar {
    width: 100%;
    background: #f66511;
    height: 34px;
    line-height: 1;
}
.copyright{
    color:#232323;
    font-size:11px;
    margin: 0 auto;
    position: absolute;
    top: 18px;
    text-align: center;
    }

Answer 1

对于版权，只需添加width:100%;即可。之所以需要这样做，是因为您已经将元素设置为绝对元素，因此如果希望文本对齐属性起作用，则必须定义宽度。

对于图像，只需添加另一个text-align属性：

#logo {
    text-align:center;
}

Answer 2

首先，去掉position: absolute，如果您想在顶部栏中显示版权声明，则将其嵌套在适当的父元素中。你会想要将它嵌套在“topbar”中。

我已经通过messed with your jsFiddle包含了正确的行为。

基本上，删除absolute定位并将topBar指定为具有text-align: center属性将使所有子文本元素居中，在本例中为您的版权。

对于图像，我只是将其设置为display: block，并给它一个边距margin: 0 auto;，这将使图像在其父容器中居中。

Answer 3

您不能使用具有绝对位置的自动边距。

如果你试图定位你的版权，你实际上应该使用上边距。

它可能看起来像这样：

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

希望这能有所帮助！