0

メインのロゴの両側に 3 つのボタンを作成しようとしています。これらのボタンは垂直方向の中央に表示されるはずですが、異なる表示プロパティや 24px の余白とパディングを適用しても変化はありません。添付の JSFiddle は、私が抱えている問題を示しています。

http://jsfiddle.net/LRaJy/

.header {
width: 100%;
background-color: #64767f;
background-position: bottom;
padding: 10px 0;
}

.header .logo {
background-image: url('../img/header-logo.png');
display:inline-block;
width: 415px;
height: 100px;
background: #fff;
}

.header-container {
width: 733px;
height: 100px;
margin: 0 auto;
}

.hover-buttons {
height: 44px;
display: inline-block;
padding-top: -5px;
}

.hover-buttons .button {
width: 44px;
height: 44px;
display: inline-block;
margin-right: 5px;
background: #fff;
}

HTMLで

<div class="header">
        <div class="header-container">
            <div class="hover-buttons">
                <div class="button backups"></div>
                <div class="button currency"></div>
                <div class="button contact"></div>
            </div>
            <div class="logo">
            </div>
            <div class="hover-buttons">
                <div class="button satisfaction"></div>
                <div class="button security"></div>
                <div class="button care"></div>
            </div>
        </div>
    </div>
4

1 に答える 1

2

これはあなたが探しているものですか？

jsFiddle デモ

.button, .logo {
    vertical-align: middle;
}
于 2013-09-11T20:59:52.147 に答える