Question

我有以下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，那么它可以工作。我确实需要两个班级......我做错了什么？

Answer 1

听起来像另一个针对span6类名称的规则正在影响事物。尝试提高特异性。添加#id选择器，或使用body作为前缀。类似的东西：

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

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

1 个答案: