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

Discussion in 'Web Design and Development' started by mark!, Oct 21, 2013.

  1. mark!, Oct 21, 2013
    Last edited: Oct 21, 2013

    mark! macrumors 65816

    mark!

    Joined:
    Feb 4, 2006
    Location:
    America
    #1
    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;


     
  2. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #2
    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.
     
  3. saschke, Oct 23, 2013
    Last edited: Oct 23, 2013

    saschke macrumors 6502

    Joined:
    Feb 2, 2008
    #3
    Quickly looked at your code. You'll need four little additions:

    [​IMG]
    [​IMG]

    Hope that helps!

    Edit: If you want to refactor, you could also use background images on your links and get rid of the divs.
     
  4. mark! thread starter macrumors 65816

    mark!

    Joined:
    Feb 4, 2006
    Location:
    America
    #4
    Thank you so much! I know it can be tedious debugging other people's code. :)
     
  5. saschke macrumors 6502

    Joined:
    Feb 2, 2008

Share This Page