0

中央にプラス画像のある水平バーが必要なページを設計しています。このように、 ここに画像の説明を入力

私はこれを試しました、

<div><img src="http://s7.postimage.org/z6jiogw6f/add_icon.png" /></div>

div{
    background: #ced8e7;
    padding: 1px 0;
    position: relative;
    text-align: center;
    overflow-x: hidden;
}

しかし、バーは円形ではなく、プラスのイメージは完全にバーの内側にあります。誰でも助けることができますか？サンプル、http://jsfiddle.net/PSAEJ/

4

3 に答える 3

2

これを試してください、それはテスト済みで動作します：

更新: jsbin デモ

于 2012-12-24T09:04:20.200 に答える
1

オーバーフロー プロパティを visible または remove (デフォルトoverflow: visible) に設定し、画像に -ve マージンを与えます

div {
    background: #ced8e7;
    padding: 1px 0;
    position: relative;
    text-align: center;
    height: 7px;
    margin-top: 5px; }

img {
    margin-top: -7px; }

更新された jsfiddle : http://jsfiddle.net/PSAEJ/10/

于 2012-12-24T09:40:52.183 に答える