Support » Themes and Templates » Center image and wrap text around it

Viewing 9 replies - 1 through 9 (of 9 total)
  • esmi

    (@esmi)

    Forum Moderator

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

    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

    Hi Robin, thank you – looks excellent in theory – will do some testing…

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

    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.

    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

    esmi

    (@esmi)

    Forum Moderator

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

    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

    Good to know it worked out for you
    cheers

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Center image and wrap text around it’ is closed to new replies.