Vertically align text to the middle of an image in Portal for ArcGIS and ArcGIS Online Map Viewer pop-ups

Summary

In Portal for ArcGIS and ArcGIS Online Map Viewer, the text alignment options available are 'Align left', 'Align right', 'Align center', and 'Justify'. These options change the placement of the text within a text box horizontally.

However, there is no option to vertically align the text to the middle of an image in the pop-ups as shown in the image below.

As a workaround, HTML formatting can be used to insert a table to achieve the desired result. In this article, the original text used to demonstrate the workflow is aligned at the bottom of the image.

Procedure

1. Log in to Portal for ArcGIS or ArcGIS Online and open the web map in Map Viewer.
2. In Map Viewer, on the Settings (light) toolbar, click Configure pop-ups in Portal for ArcGIS, or Pop-ups in ArcGIS Online.
3. In the Pop-ups pane, click Add content, and select Text.
4. In the text editor, click Source .
5. Configure the HTML codes. Replace <link_to_image> with the URL of the image.

<figure class="table">
    <table style="border-collapse:collapse;" border="0">
        <tbody>
            <tr>
                <td style="width:30%;">
                    <img class="image_resized" style="width:100%;" src="<link_to_image>" alt="" width="100" height="100">
                </td>
                <td style="width:70%;">
                    insert value for cell here
                </td>
            </tr>
        </tbody>
    </table>
</figure>

6. Click Source. The table is displayed in the text editor.
7. Click OK to close the text editor.
8. On the Contents (dark) toolbar, click Save and open, and click Save to save the modifications.

The text is vertically aligned to the middle of the image in the pop-up.