WordPress.org

Ready to get started?Download WordPress

Forums

Center image and wrap text around it (10 posts)

  1. paul724
    Member
    Posted 1 year ago #

    Please what is the simplest and best way to wrap text around a centered image?

    This post is really helpful

    but would be great if it went one step further and showed how to wrap text around the centered red leaf.

    The page I am working on is here

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    You can't wrap text around an image and also center it.

  3. cinghaman
    Member
    Posted 1 year ago #

    hi paul, this is a good article and should solve your problem
    wrapping text around all kinds of shape very easy to follow

    http://www.adobe.com/devnet/html5/articles/css3-regions.html

  4. paul724
    Member
    Posted 1 year ago #

    Hi Robin, thank you - looks excellent in theory - will do some testing...

  5. cinghaman
    Member
    Posted 1 year ago #

    yea had seen it today at work havnt tested it though, let me know how it goes
    cheers

  6. paul724
    Member
    Posted 1 year ago #

    Hi Esmi, At the risk of disagreeing with a forum moderator - I now have a working solution. My thanks to Robin for keeping me looking but mostly my thanks to Marco Del Corno who posted this last year.

    And you can
    see the results here

    My HTML is now like this:

    <img class="imageC" src="http://www.theunicornproject.co.uk/images/lambmountain.jpg" height="100" width="150" alt="Lambs in sunshine halter" />
    <div class="l"><strong>And</strong> of course there is the whole farm environment that contributes to the student's sense of well being ... And of course there is the whole farm environment that contributes to the student's sense of well being ... And of course there is the whole farm environment that contributes to the student's sense of well being ... </div>
    
    <div class="r">The lambs are also visited each year by local school and scout groups ... The lambs are also visited each year by local school and scout groups ... The lambs are also visited each year by local school and scout groups ... The lambs are also visited each year by local school and scout groups ... </div>

    and the necessary CSS is

    .imageC {
    	position: absolute;
    	/*top: 0;*/
    	left: 50%;
    	margin-left: -75px;
    	}
    
    .l, .r {
       width: 49%;
    	}
    
    .l {
    	float: left;
    	}
    
    .r  {
    	float: right;
    	}
    
    .l:before, .r:before {
    	content: "";
    	width: 75px;
    	height: 100px;
    	}
    .l:before {
    	float: right;
    	}
    .r:before {
    	float: left;
    	}

    I guess this is a bit of a workaround and it would be great to have it as a genuinely floating image with the ability to control the text floating on all sides - I will reply to Robin separately about the slow implementation in CSS3 of regions and templates.

  7. paul724
    Member
    Posted 1 year ago #

    Hi Robin, I followed your link and it looked very promising; and clearly W3 are working on regions and exclusions - but I couldn't find any real life examples of these as yet working. Shame because the principle of being able to do in HTML that which the print industry has done for years will be great. Checking some of the suggested css properties (e.g. shape-outside) via CSS3 Validation always failed.

    I am not a programmer so didn't know whether "-webkit" might help?
    I also had a quick look to see if jQuery might have solved this but didn't find anything?

    Please if you do find some live implementations then do let me know.

    Thank you,

    Paul

  8. esmi
    Forum Moderator
    Posted 1 year ago #

    You have not just centred the image,. You're floating/styling the surrounding text - which is completely different.

  9. paul724
    Member
    Posted 1 year ago #

    Hi Esmi - I am not sure I understand - my original post asked to "wrap text around a centered image". I know what I have done doesn't get all the way there but given the current constraints of CSS it is a workaround?
    Are you saying there is a way to centre the image and float/style the surrounding text?
    thanks for your thoughts,
    Paul

  10. cinghaman
    Member
    Posted 1 year ago #

    Good to know it worked out for you
    cheers

Topic Closed

This topic has been closed to new replies.

About this Topic