0

我正在尝试在主徽标的两侧创建三个按钮。这些按钮应该垂直居中显示，但是当应用不同的显示属性和/或边距和 24 像素的填充时，没有任何变化。附加的 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 回答