元素上有多個類名的奇怪行爲？

我有以下的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

元素上有多個類名的奇怪行爲？

回答

相關問題