How to align a linked image?

  • Hello,

    In WordPress > GeneratePress, when you insert an image, you have 6 default options to decide about the alignment of the image. I especially like the second option to align right.

    To respect Amazon’s guidelines, I need to insert the ready-to-use code snippet below they offer if I want to use their images on my blog. To dos so, I copy and paste it into a Customized HTML block.

    <a href="https://www.amazon.fr/Fauteuil-Relaxation-Naturel-inclinable-r%C3%A9glable/dp/B07YMZ73Y7?th=1&linkCode=li1&tag=h70-21&linkId=624070f16646e69b88b22327004a9181&language=fr_FR&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07YMZ73Y7&Format=_SL110_&ID=AsinImage&MarketPlace=FR&ServiceVersion=20070822&WS=1&tag=h70-21&language=fr_FR" ></a><img src="https://ir-fr.amazon-adsystem.com/e/ir?t=h70-21&language=fr_FR&l=li1&o=8&a=B07YMZ73Y7" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

    As such, how can align this image right since it is a link?
    As easily as a one-click button when I need to do so on an image I inserted from my WordPress media?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter masterhealerwp

    (@masterhealerwp)

    Ok, I’m not a coder but I found I can add…

    align=”right”

    …after

    Now:

    1 – This is a very manual way since I have to write that code each time I need to align right such a “linked image”. Is there a wysiwyg way to do it?

    2 – should I keep doing as above or is it better to create a class just for this?

    If so, is my CSS syntax correct and would just doing this be enough:

    .class alignright {
align: right; 
}

    Hi @masterhealerwp,

    You’re correct, you would need custom CSS to do as such.

    For instance, you can add my-align-right to the image like this:

    <a href="https://www.amazon.fr/Fauteuil-Relaxation-Naturel-inclinable-r%C3%A9glable/dp/B07YMZ73Y7?th=1&linkCode=li1&tag=h70-21&linkId=624070f16646e69b88b22327004a9181&language=fr_FR&ref_=as_li_ss_il" target="_blank"><img class="my-align-right" border="0" src="//ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07YMZ73Y7&Format=_SL110_&ID=AsinImage&MarketPlace=FR&ServiceVersion=20070822&WS=1&tag=h70-21&language=fr_FR" ></a><img src="https://ir-fr.amazon-adsystem.com/e/ir?t=h70-21&language=fr_FR&l=li1&o=8&a=B07YMZ73Y7" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

    I added the class to the img tag.

    Then, add this CSS in Appearance > Customize > Additional CSS:

    .my-align-right {
	text-align: right !important;
}

    Hope this helps!

    Thread Starter masterhealerwp

    (@masterhealerwp)

    Hi,

    I tried this:

    .my-align-right {
	text-align: right !important;
}

    It did not work.

    Then I tried the following and it seems to work:

    .myalignright {
	float: right !important;
}

    I see. Glad that worked!

    Thread Starter masterhealerwp

    (@masterhealerwp)

    Hi again,

    I’m a bit confused.

    On this page, how can center-align this linked image (inserted using Customize HTML) horizontally?

    Thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to align a linked image?’ is closed to new replies.