Text and image alignment

  • Unknown's avatar

    I am having trouble with aligning text and images on pages the way I want it. The editing page does not match the published page. For instance, at the top of one page I have 2 photos. I want the text under that and put it as such on the editing page. But when it’s published the text ‘jumps’ up a line and starts on the same line as the images. I want the text completely under the images but can’t seem to do that.

    The blog I need help with is: (visible only to logged in users)

  • Hello

    Unfortunately the editor view does not match the live view, because the live view applies CSS code and styles the content based on your theme. I know this can be frustrating at times.

    One thing you may want to try is creating HTML columns to help keep the relevant text under your images.

    You can read about how to do that at https://en.support.wordpress.com/advanced-html/#columns

    Depending on what kind and how much text, you can also explore using the Image Caption feature if it’s supported in your theme. This link talks about image captions: https://en.support.wordpress.com/images/image-settings/

    If those don’t work for you, feel free to reply and post a link to the page that you are working on and I’ll see if I can offer any other suggestions that might help.

    Hope this helps!

  • Unknown's avatar

    You might want to to try this:

    In visual mode, put the cursor where you want the image to be placed. Click on the image and several options will come out on top of it. Choose Align center or no alignment.

    You can also change your editor to html mode and use this code:

    <img style=”display: block; margin: 0 auto;”src=”Your Image URL here” alt=”alt text” />

    <p>put your text here</p>

  • Unknown's avatar

    re: image alignment
    The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left-hand side, or to display an image that’s centered without text on either side of it.

    Align-left means position left, with the rest of the content wrapping around the right side of the image.

    Align-right means position right, with the rest of the content wrapping around the left side of the image.

    Align-center means position center, with no wrap-around (= the rest of the content below the image).

    If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

    To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
    <div style="clear:both;"></div>

  • Unknown's avatar

    I want the text completely under the images but can’t seem to do that.

    Then use the align center icon
    https://en.support.wordpress.com/visual-editor/#alignment

  • The topic ‘Text and image alignment’ is closed to new replies.