Need help? Check out our Support site, then


WordPress.com Forums » Support

Question about word wrap around photos

  1. amarkonmywall
    Member

    I am working on the blog http://amarkonmywall.wordpress.com, and the client wants the Ocean Mist theme. Her photos are automatically left-justifying, with the text wrapping around on the side. I know that I don't have a lot of options as far as modifying the code is concerned, but is there a way to center the photos with the text on the top and bottom? I tried putting in center tags and they were stripped out.

    If it's not possible to do at all, or with this theme, that's okay, I just want to be able to tell her for sure. Thank you.

  2. kimik0
    Member

    You can center images by putting them inside a < p style="text-align:center;" > < /p > pair.

    To get text to stay away from floating images, use a < p style="clear:left;" > < /p > pair. Replace 'left' with 'right' or 'both' as appropriate.

    For all your CSS needs: http://www.w3.org/TR/CSS21/

  3. amarkonmywall
    Member

    Thank you kimik0; I didn't realize I had that much CSS flexibility here. I'll check with my client and see if she is comfortable putting that code in every time she posts a photo, or if she wants to pay me to do it each time :)

  4. raincoaster
    Member

    If you use the visual editor, just click on the photo, click on the image icon (picture of a tree) and select "Middle" for alignment. You can also set borders and spacing there. Or she can pay you to do it, if you don't tell her.

  5. timethief
    Member

    For reference http://faq.wordpress.com/2006/05/29/how-do-i-get-text-to-go-around-a-picture/

  6. abbydonkrafts
    Member

    That actually causes a problem on my theme. The text beside the image disappears behind the sidebar. It's unfortunate, too, because I really like using small graphics that take up 2 or 3 lines with left alignment.

  7. options
    Member

    I wouldn't recommend using a 'middle' property of the align attribute for image elements for several reasons:

    * it does a _vertical_ alignment of an image (with the current baseline) -- and the OP, if I understood them correctly, wants an image to be centered relative to the left and right column margins, i.e. horizontally.

    * it's a 'deprecated' attribute -- means it won't be supported in the future, so next generation ob browsers may render such page by another way.

    that "visual" editor does center a _selected_ image when an 'Align Center' button pressed on its toolbar, using exactly the method described above by kimik0, i.e. it places an img into Paragraph element with an inline STYLE="text-align: center".

    [me wanders why doesn't it add an apropriate 'float:*' to the image instead of deprecated ALIGN for left/right flushed images]

    however, I wouldn't also use this feature as centered images are generaly good if they are big enough to be used as a 'pool-outs' across 2 or 3 columns of text. since here we can use only single column layout, centered images which are narrow than 90% column width will look rather ugly -- I don't know how to make text wrapped around centered images within a single column.

    finally, just for the record: W3C recommended way to center an inline object (like image) is style="display: block; margin-left: auto; margin-right: auto" which is also approved by the WP Codex as using a "text-align: center" may fail under some conditions.

  8. raincoaster
    Member

    Uh, no, it only aligns it between left and right margins, not in the vertical AND horizontal middle of a post. I aught to know: I use it on three different blogs every day.

  9. options
    Member

    hello rain,

    middle: means that the center of the object should be *vertically* aligned with the current baseline.

    hello abbyd,

    from the CSS of your theme in use (looks like it's a Kubrik derived one):

    Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid).

  10. raincoaster
    Member

    Maybe that's what it should mean, but that's not how it works at all.

  11. options
    Member

    I guess I know what you mean -- it's a *side effect* of:

    Differing interpretations of align. User agents vary in their interpretation of the align attribute. Some only take into account what has occurred on the text line prior to the element, some take into account the text on both sides of the element.

    if an image is in the middle (literally) of text Para. some agents will also center it it horiz.-ly, if it's in the beginning it'll gonna be left-aligned like in http://options.wordpress.com/?p=132

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags