Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Tweak Float center to have a top offset

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #41547
    panku
    Member

    I was following along [this](https://css-tricks.com/float-center/) and I just need a top offset on the image being floated center. The space on top should obviously be occupied by text around it. A negative bottom margin isn’t working.

    #118694
    David_Leitch
    Participant

    Hey, I’ve put up a [CodePen](http://codepen.io/David_Leitch/pen/khLuChttp://codepen.io/David_Leitch/pen/khLuC”) to help you.

    Basically, to make the image and text line up, you either have to position the image absolutely:

    .center-float{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -150px; /* HALF OF IMAGE WIDTH */
    }

    Otherwise, you must give the actual text a negative top margin, to bring it back in line with the image. That’s what I’ve done in my CodePen. You give the .l and .r divs a neg top margin of the image height. Hope that helps :)

    #118696
    panku
    Member

    I was trying to achieve something like this

    ![float center example image](http://i.stack.imgur.com/cpTGX.png)

    #118697
    panku
    Member

    You see here the blockquote in middle has some top offset and the text there wraps perfectly into column structure.

    #118698
    rodolpheb
    Participant

    Maybe, it would be easier with 4 blocks of paragraphs.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.