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> </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} </span><br>
<span style="color:#005daa;"><strong>Route ID: </strong></span><span style="color:#080808;">{Route_ID} </span><br>
<span style="color:#005daa;"><strong>Route Name: </strong></span><span style="color:#0a0a0a;">{RouteName} </span><br>
<span style="color:#005daa;"><strong>SMART SCALE Application ID: </strong></span><span style="color:#070808;"><span>{App_ID}</span> </span><br>
<span style="color:#005daa;"><strong>UPC: </strong></span><span style="color:#070808;"><span>{UPC}</span> </span><br>
<span style="color:#005daa;"><strong>Type of Work: </strong></span><span style="color:#070808;">{Type_Work} </span><br>
<span style="color:#005daa;"><strong>Funded Amount: </strong></span><span style="color:#0f0f0f;">${Funded_Amount} </span><br>
<span style="color:#005daa;"><strong>Pipeline Study Webpage: </strong></span><span style="color:#94b439;"><strong>{Pipeline_Study_Webpage} </strong></span>
</td>
</tr>
</tbody>
</table>
</figure>
Thank you!
Solved! Go to 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> </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} </span><br>
<span style="color:#005daa;"><strong>Route ID: </strong></span><span style="color:#080808;">{Route_ID} </span><br>
<span style="color:#005daa;"><strong>Route Name: </strong></span><span style="color:#0a0a0a;">{RouteName} </span><br>
<span style="color:#005daa;"><strong>SMART SCALE Application ID: </strong></span><span style="color:#070808;"><span>{App_ID}</span> </span><br>
<span style="color:#005daa;"><strong>UPC: </strong></span><span style="color:#070808;"><span>{UPC}</span> </span><br>
<span style="color:#005daa;"><strong>Type of Work: </strong></span><span style="color:#070808;">{Type_Work} </span><br>
<span style="color:#005daa;"><strong>Funded Amount: </strong></span><span style="color:#0f0f0f;">${Funded_Amount} </span><br>
<span style="color:#005daa;"><strong>Pipeline Study Webpage: </strong></span><span style="color:#94b439;"><strong>{Pipeline_Study_Webpage} </strong></span>
</td>
</tr>
</tbody>
</table>
</figure>
</div>
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> </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} </span><br>
<span style="color:#005daa;"><strong>Route ID: </strong></span><span style="color:#080808;">{Route_ID} </span><br>
<span style="color:#005daa;"><strong>Route Name: </strong></span><span style="color:#0a0a0a;">{RouteName} </span><br>
<span style="color:#005daa;"><strong>SMART SCALE Application ID: </strong></span><span style="color:#070808;"><span>{App_ID}</span> </span><br>
<span style="color:#005daa;"><strong>UPC: </strong></span><span style="color:#070808;"><span>{UPC}</span> </span><br>
<span style="color:#005daa;"><strong>Type of Work: </strong></span><span style="color:#070808;">{Type_Work} </span><br>
<span style="color:#005daa;"><strong>Funded Amount: </strong></span><span style="color:#0f0f0f;">${Funded_Amount} </span><br>
<span style="color:#005daa;"><strong>Pipeline Study Webpage: </strong></span><span style="color:#94b439;"><strong>{Pipeline_Study_Webpage} </strong></span>
</td>
</tr>
</tbody>
</table>
</figure>
</div>