Question

所以，我正在制作这些tumblr主题，并且我无法将自动宽度元素居中。我希望信息框位于图片的正中央（现在不是）：

http://38.media.tumblr.com/200719998b2a013bf244db059eb89559/tumblr_nars2tF6t51tko1yno1_500.png

框的宽度不是常数，因为数字（音符计数）可能有一到多个数字。

目前的代码是：

#info {
background-color:{color:Info Background};
color:{color:Text};
font-size:10px;
font-family:cambria;
line-height:160%;
width:120%;
height:18px;
opacity:0.8;
letter-spacing:1px;
text-align:center;
z-index:2;
}

#posts:hover .i {
opacity:1.0;
    transition-duration: 0.6s;  
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;  
    -o-transition-duration: 0.6s;  
z-index:2;
}

.i {
opacity:0.0;
width:auto;
    position:absolute;
    left:50%;  /* my mistake is here somewhere, I guess*/
    top:50%;
    transition-duration: 0.6s;  
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;  
    -o-transition-duration: 0.6s;
z-index:2;
}

Answer 1

将您想要居中的元素设置为display: block，然后将其margin-left和margin-right设置为自动

Answer 2

将div中任何项目居中的最佳方法是使用margin:0 auto; 如果你还包括你的html，那么告诉别的什么可能更容易

Answer 3

如果CSS级别3是一个选项，您可以使用负值为-50%的CSS变换translate()表达式，以便将绝对定位元素居中，如下所示：

EXAMPLE HERE

.i {
    position:absolute;
    left: 50%;
    top:  50%;

    transform: translate(-50%, -50%); /* I omitted vendor prefixes to keep
                                         This snippet short */
    transition-duration: 0.6s;
    z-index:2;
}

这是因为变换函数的百分比值是指bounding box的大小。

值得注意的是CSS转换is supported in IE9+。

居中自动宽度内容

3 个答案: