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>

这是我的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

我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;
    }

希望这有帮助！

Answer 4

如果你想使用.copyright的position：absolute，那么给div的宽度为100％。对于图像，将其设置为显示块并为其赋予边距：0 auto。

#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%
}

这是一个更新的fiddle

Answer 5

没问题，只需使用翻译和绝对定位：

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

这里发生的是你的图像开始进入屏幕的一半（left: 50%）。麻烦的是那时图像太右了，所以你translate回到50％（指的是元素的宽度）。

您可以使用此选项以垂直轴为中心，top: 50%和translate(x, -50%)

此codepen比您需要的更多，但您可以在.loading中看到翻译工作。

Answer 6

我更正了你的DOM实现和CSS。

这里是JSFiddle

http://jsfiddle.net/z9j9rsz2/43/ 1

CSS

.topbar {
    width: 100%;
    background: #f66511;
    height: 34px;
    text-align: center;
}
.copyright{
    color:#232323;
    font-size:11px;
    line-height: 32px;
}
#logo {
    margin: 0px auto;
    display: block;
}

HTML

<div class="topbar">
    <span class="copyright">Copyright &copy; 2014 Microsoft</span>
</div>
<img src="http://fc01.deviantart.net/fs71/f/2012/048/4/0/microsoft_windows_8_logo_by_pooterman-d4q0ub4.png" id="logo" />

如何使用CSS中心版权和图像？

6 个答案: