のこぎりの画像を 2 つの境界線の間に移動しようとしているので、このようになります。
画像を正しく中央に配置したと思いますが、正しくない場合はパディングを使用することを嫌います。また、1 つの境界線を前に重ねて、2 つの境界線内に配置する必要もあります。おそらく、それを行うには z-index を使用する必要がありますが、そこまでは行きません。
こんにちはポジショニングで遊んで、参照された画像の要件に従って結果を作成しようとしました。これがお役に立てば幸いです。
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/
あなたはこのようなものを探しています:
デモを参照してください: http://jsfiddle.net/rathoreahsan/Fcn96/
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 は避けてください)。
AlphaMale がここで提案していることを試すことができます: How to center image in a div horizontal and vertical
画像の前に「span」タグを含めます。次に、このプロパティを「saw」クラスに追加します。
#logo-container .saw {
text-align: center;
margin-bottom:-50px!important;
}
!重要なのは、実際にある margin: 0 auto をオーバーライドすることです。