CODEWITHSUNDEEP
htmlcss
JoshMc
JoshMc

Reputation: 739

Applying margins to divs with inline-block in containers

I'm trying to create three buttons on either side of my main logo. These buttons should appear vertically center however when applying different display properties and/or margins and padding of 24px~ nothing changes. The attached JSFiddle shows the issue I have.

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;
}

with the 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>

Upvotes: 0

Views: 40

Answers (1)

Itay
Itay

Reputation: 16785

Is this what you're looking for?

jsFiddle Demo

.button, .logo {
    vertical-align: middle;
}

Upvotes: 2

Related Questions