Forums

panku

I was following along this 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.

David_Leitch

Hey, I've put up a CodePen 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 :)

panku

I was trying to achieve something like this

float center example image

panku

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

rodolpheb

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

treehouse : what would you like to learn today?

Forums

Tweak Float center to have a top offset