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

Question

我想将我的版权和 Logo (Windows Logo )居中。我怎样才能使用 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%;。您需要这个，因为您已将元素设置为绝对元素，因此如果您希望文本对齐属性起作用，则必须定义宽度。

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

#logo {
    text-align:center;
}