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

これらのスパンをクラス内にラップして、以下のコードを試すことができますか。この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 に答える