1

のこぎりの画像を 2 つの境界線の間に移動しようとしているので、このようになります。

画像を正しく中央に配置したと思いますが、正しくない場合はパディングを使用することを嫌います。また、1 つの境界線を前に重ねて、2 つの境界線内に配置する必要もあります。おそらく、それを行うには z-index を使用する必要がありますが、そこまでは行きません。

Jsフィドル

4

4 に答える 4

1

こんにちはポジショニングで遊んで、参照された画像の要件に従って結果を作成しようとしました。これがお役に立てば幸いです。

CSS

    #logo-container .saw {
        left: 50%;
        margin: 0 auto;
        position: relative;
        top: 46px;
    }
#tag-container {
    border: 2px solid #00AC9D;
    height: 150px;
    margin-bottom: 5px;
    position: relative;
    width: 1140px;
}

デモを参照してください:- http://jsfiddle.net/RJVXE/16/

于 2012-06-26T11:10:21.967 に答える
1

あなたはこのようなものを探しています:

デモを参照してください: http://jsfiddle.net/rathoreahsan/Fcn96/

于 2012-06-26T11:10:34.457 に答える
0

z-index とポジショニングの両方を利用する必要があります。

.line
{
    height:1px;
    width:100%;
    background:#000;
    position:absolute;
    left:0px;
}
.item1
{
    top:5px; 
    z-index:5;
}
.item3
{
    top:25px; 
    z-index:15;
}


<div style="width:100%; position:relative">
    <div class="line item1"></div>
    <div style="position:absolute; top:0px;left:50px;z-index:10">
          <img src="saw.png" />
    </div>
    <div class="line item3"></div>
</div>

(例では、簡潔にするためにインラインとブロックされた CSS 参照の両方を使用しています。インライン CSS は避けてください)。

于 2012-06-26T11:06:01.660 に答える
0

AlphaMale がここで提案していることを試すことができます: How to center image in a div horizo​​ntal and vertical

画像の前に「span」タグを含めます。次に、このプロパティを「saw」クラスに追加します。

#logo-container .saw {
    text-align: center;
    margin-bottom:-50px!important;
}

!重要なのは、実際にある margin: 0 auto をオーバーライドすることです。

http://jsfiddle.net/2EKWS/1/

于 2012-06-26T11:10:07.567 に答える