Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Why can't I get the middle image/div of three to center?

mark!

mark!

macrumors 65816
Original poster
Feb 4, 2006
1,370
1
America
http://iledan.me/test.html

I have a set of 3 images as links using CSS transitions to create a hover effect. Each image has its own div, and all 3 divs are in a container div. Why can't I get the middle image to center between the float:left; and float:right; div?

If you have a solution to my problem or an alternative solution (rather than 3 divs) I'd greatly appreciate it! :)

EDIT: the middle div is centered using margin-left:auto; and margin-right:auto;


<html>
<head>
<style type="text/css">
#container {
width: 170px;
height: auto;
}

#linkedin
{
float: left;
height: 30px;
width: 30px;
}

#linkedin img {
position:absolute;
height: 30px;
width: 30px;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;}
#linkedin img.top:hover {opacity:0;}

#facebook
{
height: 30px;
width: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#facebook img {
position: absolute;
height: 30px;
width: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;}
#facebook img.top:hover {opacity:0;}

#instagram
{
height: 30px;
width: 30px;
margin-left: auto;

}

#instagram img {
position:absolute;
height: 30px;
width: 30px;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;}
#instagram img.top:hover {opacity:0;}

</style>
</head>

<body>
<div id = "container">

<div id="linkedin">
<a href="index.html"><img src="images/linkedin_h.png"/>
<img class="top" src="images/linkedin.png"/>
</a></div>

<div id="instagram">
<a href="index.html"><img src="images/instagram_h.png"/>
<img class="top" src="images/instagram.png"/>
</div>

<div id="facebook">
<a href="index.html"><img src="images/facebook_h.png"/>
<img class="top" src="images/facebook.png"/>
</a>
</div>
</div>
</body>
</html>
Click to expand...
 
Last edited:
Haven't looked at your code, just your 'issue'.

Floating takes things out of the flow, trying to get a middle div of anything in between two item out of flow will not work.

Try something like display:inline-block; or you could float:left the first two and float:right the last OR float:left all three or float:right... and on and on.
 
Quickly looked at your code. You'll need four little additions:

fix.jpg

fix.jpg


Hope that helps!

Edit: If you want to refactor, you could also use background images on your links and get rid of the divs.
 
Last edited:
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back