Placing a IMG centre between two surrounding divs

Question

I want to centre a image on my menu bar between two other divs, here is a image showing what i am trying to do is: here

I want to place the social icons in the centre where the red box is, i know i could do this by playing around with padding and margins and doing it pixel by pixel but is there a way which it could be positioned there perfectly ?

I have tried adding margin-left:auto; and margin-right:auto; to the surrounding div however this didn't do anything.

Here is my HTML :

<div id="header">
    <div id="pre_header">
        <div class="pre_header_content">
            <div id="pre_header_content_left">
                <ul>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/voucher.png" width="12"></img>Voucher codes</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/basket.png" width="12"></img>In-store codes</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/mouse.png" width="12"></img>Online codes</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/speaker.png" width="12"></img>Advertise</li></a>
                </ul>
            </div>
            <div id="pre_header_social_icons">
                <a href="pages/#.php"><img class="header_social_icons" src="images/social/header_facebook_grey.png" onmouseover="this.src='images/social/header_facebook_white.png'" onmouseout="this.src='images/social/header_facebook_grey.png'" width="14"></img></a>
                <a href="pages/#.php"><img class="header_social_icons" src="images/social/header_twitter_grey.png" onmouseover="this.src='images/social/header_twitter_white.png'" onmouseout="this.src='images/social/header_twitter_grey.png'" width="14"></img></a>
                <a href="pages/#.php"><img class="header_social_icons" src="images/social/header_google_grey.png" onmouseover="this.src='images/social/header_google_white.png'" onmouseout="this.src='images/social/header_google_grey.png'" width="14"></img></a>
            </div>
            <div id="pre_header_content_right">
                <ul>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Login</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/thumb.png" width="12"></img>Sign up</li></a>
                </ul>
            </div>
        </div>
    </div>
    <div id="main_header">
        <div class="main_header_content">
            Test
        </div>
    </div>
</div>

Here is my CSS:

#pre_header {
    width:100%;
    height:30px;
    background-color:#202020;
    border-bottom:1px solid black;
}
.pre_header_content {
    margin:0 auto;
    width:1140px;
}
#pre_header_content_left {
    float:left;
}
#pre_header_content_left ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height:30px;
}
#pre_header_content_left li {
    display: inline;
    border-right: 1px solid #292929;
    border-left: 1px solid #292929;
    padding:6px 15px 5px 15px;
    margin-right:-2px;
    font-size:14px;
}
#pre_header_content_left a {
    text-decoration:none;
    color:#fff;

}
#pre_header_content_left li:hover {
    background-color:#4e4e4e;

}

#pre_header_content_right {
    float:right;
}
#pre_header_content_right ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height:30px;
}
#pre_header_content_right li {
    display: inline;
    border-right: 1px solid #292929;
    border-left: 1px solid #292929;
    padding:6px 15px 5px 15px;
    margin-right:-2px;
    font-size:14px;
}
#pre_header_content_right a {
    text-decoration:none;
    color:#fff;

}
#pre_header_content_right li:hover {
    background-color:#4e4e4e;

}
.navigation_icons {
    padding-right:5px;
}

#pre_header_social_icons { 
    float:none;
    display:inline;
    line-height: 30px;
      margin-left: 0;
    margin-right: 0;

}
.header_social_icons {
    padding-left:5px;
    padding-right:5px;
}


#main_header {
    width:100%;
    height:70px;
    background-color:#343434;
}
.main_header_content {
    margin:0 auto;
    width:1140px;
}

What is the solution?

Marcos Pérez Gude · Answer 1 · 2015-07-06T08:44:17.317

1

With display:inline you can't move with freedom the box. You can try it with display: inline-block in the social-icons div:

#pre_header_social_icons { 
   float:none;
   display:inline-block;
   line-height: 30px;
   position: relative;
   margin: 0 auto;
}

See that fiddle: https://jsfiddle.net/twu4djwz/

updated fiddle

https://jsfiddle.net/twu4djwz/2/

edited Jul 06 '15 at 08:44

answered Jul 06 '15 at 08:34

Marcos Pérez Gude

21,869
4
38
69

Thanks for your help, I'm still having a problem that the social icons need to be inside the red box centred between the divs each side – Bradley Cousins Jul 06 '15 at 08:41
just add `text-align:center`. The icons should be an `inline` or `inline-block` elements to correct behaviour. I update the fiddle – Marcos Pérez Gude Jul 06 '15 at 08:43

score 1 · Accepted Answer · edited May 23 '17 at 12:25

I think the only possibility here is to work with percentages.

I've edited your HTML down to the basics and this is what I came up with:

HTML

<div id="header">
    <div id="pre_header">
        <div class="pre_header_content">
            <div id="pre_header_content_left">
            </div>
            <div id="pre_header_social_icons">
            </div>
            <div id="pre_header_content_right">
            </div>
        </div>
    </div>
</div>

CSS

#pre_header {
    width:1140px;
    height:30px;
    background-color:#202020;
    border-bottom:1px solid black;
}

#pre_header_content_left {
    float:left;
    width: 40%;
    height: 30px;
    background:blue
}


#pre_header_content_right {
    float:right;
    height:30px;
    width:15%;
    background:yellow;
}

.navigation_icons {
    padding-right:5px;
}

#pre_header_social_icons { 
    float:none;
    display:inline-block;
    line-height: 30px;
     margin: 0 auto;
    position:relative;
    width: 45%;
    height: 30px;
    background-color:red;
    text-align: center;

}
.header_social_icons {
    padding-left:5px;
    padding-right:5px;
}

Fiddle

What I've done is give the pre_header_content_left a width of 40%, the pre_header_content_right a width of 15% and the remaining 45% got applied on the social_icons, which already had a text-align: center from Marcos' answer.

You might want to play around with the fiddle, so it fits exactly your needs. I've used your static 1140px-wide bar now, but I recommend you use % there as well and apply some kind of CSS style when a piece of the menu-bar gets below X%.

Also: Take a look at this question and see if you can use the accepted answer to make something that automatically fills up the remaining % with your social_icons instead of giving it a static %-width.

Placing a IMG centre between two surrounding divs

2 Answers2

updated fiddle