1

私はこれにかなりの時間を費やしており、何十回もの投稿で読んだことを実装しようとした後でも、これの最後の部分でまだ運がありません.

私が持っているのは、追加の div の 2 つの行を収容する親 div です。最初の行は単一の div で、リンク付きのラベルが含まれています。2 番目の行には、複数の div が並んで含まれています。

最初の行 (ラベル/リンク) はうまくセンタリングされています。私が問題を抱えているのは、2 行目の div を中央に配置することです。それらはすべて横に並んでいますが、左詰めのように表示されています。

これが私のCSSです：

div.parent-container {
    position:absolute;
    background-color:#fff;
    top:32px;
    left:-1px;
    width:418px;
    height:67px;
    border-right:solid 1px #000;
    border-left:solid 1px #000;
    border-bottom:solid 1px gray;
    padding-left:2px;
    text-align:center;
    float:left;
}

div.text-label a {
    position:absolute;
    background-color:#fff;
    font-family:Microsoft Sans Serif,Arial;
    font-weight:bold;
    width:417px;
    height:15px;
    font-size:12px;
    margin-left:auto;
    margin-right:auto;
}

div.sub-container {
    position:relative;
    width:30px;
    height:auto;
    top:20px;
    float:left;
    padding-right:5px;
    margin-left:auto;
    margin-right:auto;
}

span.span-text {
    position:relative;
    font-weight:bold;
    font-family:Microsoft Sans Serif,Arial;
    font-size:11px;
    width:30px;
    height:auto;
}
div.img1 {
    height:26px;
    width:18px;
    background:url(sprite.png) -72px -144px no-repeat;
    margin-left:auto;
    margin-right:auto;
}
 div.img2 {
    height:26px;
    width:18px;
    background:url(sprite.png) -95px -143px no-repeat;
    margin-left:auto;
    margin-right:auto;
}
 div.img3 {
    height:26px;
    width:18px;
    background:url(sprite.png) -117px -143px no-repeat;
    margin-left:auto;
    margin-right:auto;
}
 div.img4 {
    height:26px;
    width:18px;
    background:url(sprite.png) -141px -143px no-repeat;
    margin-left:auto;
    margin-right:auto;
}

そして私のHTML：

<div class="parent-container">
    <div class="text-label"><a href="www.website.com">link to website</a></div>
    <div id='div1' class='sub-container'><span class='span-text'>text1</span>
        <div class='img1'></div>
    </div>
    <div id='div2' class='sub-container'><span class='span-text'>text2</span>
        <div class='img2'></div>
    </div>
    <div id='div3' class='sub-container'><span class='span-text'>text3</span>
        <div class='img3'></div>
    </div>
    <div id='div4' class='sub-container'><span class='span-text'>text4</span>
        <div class='img4'></div>
    </div>
</div>

2 行目の div を格納する追加の div を作成しようとしましたが、それもうまくいきませんでした。

どんな助けでも大歓迎です！

4

2 に答える 2

2

jsfiddle の例

float:leftサブコンテナの div ( ) からを削除div.sub-containerし、幅を指定します (パディング、マージンなどにより約 23%)。

于 2012-07-24T20:19:49.633 に答える
1

要素/子 div を中央に配置する場合は、2 行目を別のコンテナーで囲みます。

デモはこちら

また、要素を中央に配置したい場合widthは、デモでその要素を定義する必要があります-私は200pxの幅を与えました。好みに応じて変更できます。

コンテナの CSS :

.textContainer{
  margin: 0 auto;
  width:200px; /* can be in percentage ,say 50% */
  position:relative;
  overflow:hidden;
}
于 2012-07-24T20:18:08.150 に答える