Center Table in Pop-up box

[JanelleShank]

Hi All, 

I am trying to center a table within the pop-boxes on my online map but an having little success getting the table to show up in the center of pop-up box. Does anyone have any suggestions or tips?

Below is my code. 

<figure class="table">
<table>
<tbody>
<tr>
<td style="border-color:#f47735;border-style:solid;">
<p style="text-align:center;">
<span style="color:#005daa;"><strong>Pipeline Study ID: </strong><span><strong>{LocationID}</strong></span><strong>&nbsp;</strong></span>
</p>
</td>
</tr>
<tr>
<td style="border-color:#f47735;border-style:solid;">
<span style="color:#005daa;"><strong>District: </strong></span><span style="color:#080808;">{District}&nbsp;</span><br>
<span style="color:#005daa;"><strong>Route ID: </strong></span><span style="color:#080808;">{Route_ID}&nbsp;</span><br>
<span style="color:#005daa;"><strong>Route Name: </strong></span><span style="color:#0a0a0a;">{RouteName}&nbsp;</span><br>
<span style="color:#005daa;"><strong>SMART SCALE Application ID: </strong></span><span style="color:#070808;"><span>{App_ID}</span>&nbsp;</span><br>
<span style="color:#005daa;"><strong>UPC: </strong></span><span style="color:#070808;"><span>{UPC}</span>&nbsp;</span><br>
<span style="color:#005daa;"><strong>Type of Work: </strong></span><span style="color:#070808;">{Type_Work}&nbsp;</span><br>
<span style="color:#005daa;"><strong>Funded Amount: </strong></span><span style="color:#0f0f0f;">${Funded_Amount}&nbsp;</span><br>
<span style="color:#005daa;"><strong>Pipeline Study Webpage: </strong></span><span style="color:#94b439;"><strong>{Pipeline_Study_Webpage}&nbsp;</strong></span>&nbsp;
</td>
</tr>
</tbody>
</table>
</figure>

Thank you!

[JenniferAcunto · Accepted solution]

Wrap it in a div and use flexbox to center it.

<div style="display:flex;justify-content:center;">
    <figure class="table">
        <table>
            <tbody>
                <tr>
                    <td style="border-color:#f47735;border-style:solid;">
                        <p style="text-align:center;">
                            <span style="color:#005daa;"><strong>Pipeline Study ID: </strong><span><strong>{LocationID}</strong></span><strong>&nbsp;</strong></span>
                        </p>
                    </td>
                </tr>
                <tr>
                    <td style="border-color:#f47735;border-style:solid;">
                        <span style="color:#005daa;"><strong>District: </strong></span><span style="color:#080808;">{District}&nbsp;</span><br>
                        <span style="color:#005daa;"><strong>Route ID: </strong></span><span style="color:#080808;">{Route_ID}&nbsp;</span><br>
                        <span style="color:#005daa;"><strong>Route Name: </strong></span><span style="color:#0a0a0a;">{RouteName}&nbsp;</span><br>
                        <span style="color:#005daa;"><strong>SMART SCALE Application ID: </strong></span><span style="color:#070808;"><span>{App_ID}</span>&nbsp;</span><br>
                        <span style="color:#005daa;"><strong>UPC: </strong></span><span style="color:#070808;"><span>{UPC}</span>&nbsp;</span><br>
                        <span style="color:#005daa;"><strong>Type of Work: </strong></span><span style="color:#070808;">{Type_Work}&nbsp;</span><br>
                        <span style="color:#005daa;"><strong>Funded Amount: </strong></span><span style="color:#0f0f0f;">${Funded_Amount}&nbsp;</span><br>
                        <span style="color:#005daa;"><strong>Pipeline Study Webpage: </strong></span><span style="color:#94b439;"><strong>{Pipeline_Study_Webpage}&nbsp;</strong></span>&nbsp;
                    </td>
                </tr>
            </tbody>
        </table>
    </figure>
</div>