Question about word wrap around photos

  • Author
  • #134507

    I am working on the blog, 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.



    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:


    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 :)



    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.



    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.



    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.



    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.



    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).


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



    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

The topic ‘Question about word wrap around photos’ is closed to new replies.