Menu icon Foundation
What's the best approach to align links/images to the right in a column with Inky?

What's the best approach to align links/images inline to the right in a column with Inky?

Here's an example:

<columns large=10>
 <a href="#"><img width="40" height="40" src="fb-icon.png"/></a>
 <a href="#"><img width="40" height="40" src="tw-icon.png"/></a>
 <a href="#"><img width="40" height="40" src="in-icon.png"/></a>
 <a href="#"><img width="40" height="40" src="yt-icon.png"/></a>
</columns>

Normally I would put align-text: right !important; on the wrapping <th> element.

inkyhtmlcssimagesalignalignmentFoundation For Email 2

What's the best approach to align links/images inline to the right in a column with Inky?

Here's an example:

<columns large=10>
 <a href="#"><img width="40" height="40" src="fb-icon.png"/></a>
 <a href="#"><img width="40" height="40" src="tw-icon.png"/></a>
 <a href="#"><img width="40" height="40" src="in-icon.png"/></a>
 <a href="#"><img width="40" height="40" src="yt-icon.png"/></a>
</columns>

Normally I would put align-text: right !important; on the wrapping <th> element.

Corey Schaaf over 3 years ago

Should be fairly straight forward.  You just need to use the class="text-right" inside a <p> tag.  Then you can next your anchors and images inside them.  The <img> will need to have a display:inline (note you can use a class to override the default styling of these). 

<row>    
    <columns large="10">
      <p class="text-right">
        <a href="http://placehold.it"><img style="display:inline;" src="http://placehold.it/50x50"></a>      
        <a href="http://placehold.it"><img style="display:inline;" src="http://placehold.it/50x50"></a>      
        <a href="http://placehold.it"><img style="display:inline;" src="http://placehold.it/50x50"></a>      
        <a href="http://placehold.it"><img style="display:inline;" src="http://placehold.it/50x50"></a>
      </p>
    </columns>
</row>

Please let me know if you find this helpful. 

   ;;;;.
   ;;;;;
   ;;;;;
   ;;;;;
   ;;;;;
   ;;;;;
 ..;;;;;..
  ':::::'
    ':`