0

CSS：

.list-a .desc-fix {
    width: 180px;
    margin: 0px auto;
    position: relative;
}
.list-a .desc {
    background: url("../images/trans_black.png") repeat;
    display: block;
    font-family: arial;
    font-size: small;
    height: 18px;
    margin: 3px 0 0 50px;
    overflow: hidden;
    padding: 10px;
    position: absolute;
    width: 180px;
    z-index: 3;
    right:30px;
    left:30px
}

HTML：

<span class="desc-fix">
    <span class="desc">
        <h4>Text A</h4>
        <h5>Text B</h5>
    Long text long text long text Long text long text long text Long text long text long text Long text long text long text Long text long text long textLong text long text long text Long text long text long text
    </span>
</span>

以上是我的代码，用于对齐绝对定位跨度以在中间对齐。

但是当我加载页面时，它没有在中间对齐。

当我改变（我认为不是真正的改变）任何 css 到任何东西并通过 Firebug 将其更改回原始值时，它会居中对齐。任何想法，发生了什么？

4

2 回答 2

1

您应该始终将您的 css 类链接到它们的直接父级，例如：

.list-a span .desc-fix {)
.list-a span .desc {)

或者只是

span .desc-fix {}
span .desc {}

它在任何其他浏览器中都有效吗？

编辑：试一试https://stackoverflow.com/a/7720742/2516336

于 2013-06-24T13:28:03.427 回答
1

您可以尝试下面的代码，将这些跨度包装在一个类中。检查这个JSFiddle

.list-a .desc-fix {
    width: 100%;
    height: 100%;
}
.list-a .desc {
    background: url("../images/trans_black.png") repeat;
    display: block;
    font-family: arial;
    font-size: small;
    margin: 3px 0 0 50px;
    padding: 10px;
    max-width:300px;
    max-heigtht: 400px;
    width: 100%;
    height: 100%;
}
.list-a {
    width:300px;
    height:400px;
    margin: 0px auto;
}
于 2013-06-24T13:32:59.400 回答