元素上有多个类名的奇怪行为？

我有以下的CSS：元素上有多个类名的奇怪行为？

.side-study-box { 
    background-color: white; 
    color: black; 
    border: 3px solid #0072A6; 
    text-align: center; 
    height: 220px; 
    margin-bottom: 15px; 
    margin-top: 15px; 
    display: table; 

    -webkit-box-shadow: 3px 3px 3px #888888; 
    -moz-box-shadow: 3px 3px 3px #888888; 
    box-shadow: 3px 3px 3px #888888; 
} 
    .side-study-box p { 
     position: relative; 
     width: 100%; 
     margin: auto; 
     font-size: 24px; 
     display: table-cell; 
     vertical-align: middle; 
    }

而下面的HTML：

<div class="side-study-box span6 "> 
    <p>SIDE 1</p> 
</div>

但是文本没有被垂直或水平居中。如果我要么从div中删除span6类，要么将span6作为我在CSS中的side-study-box，而是将其作用。我确实需要两个类，但是我做错了什么？

来源

2013-03-21 JakeP

要居中的元素必须嵌套在display：table-cell;元素，为一个。 – cpf 2013-03-21 23:53:40

听起来像另一个针对'span6'的规则正在影响着事物。 – 2013-03-21 23:55:44

@cpf - 我只是嵌套它，它不起作用。如果我选择一个课程或另一个课程，它确实有效。 – JakeP 2013-03-21 23:58:48

对我来说听起来像另一个规则是针对span6类名称影响的东西。尝试增加特异性。添加一个#id选择器，或以body作为其前缀。例如：

body .side-study-box { /*...*/ } 
body .side-study-box p {/*...*/ }

来源

2013-03-22 18:21:28

元素上有多个类名的奇怪行为？

回答

相关问题