- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
Hey, I’ve put up a [CodePen](http://codepen.io/David_Leitch/pen/khLuC “http://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 :)
I was trying to achieve something like this

You see here the blockquote in middle has some top offset and the text there wraps perfectly into column structure.
Maybe, it would be easier with 4 blocks of paragraphs.