Power Platform Community Forum Thread Details

Hello, I need help putting the greenbox (Final Note) in the middle of the column in HTML
In the email it looks like this, but it's wrong

I need the green box to be centered like the bracket

The HTML I'm using is this

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>HTML com Ícones de Chaves</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-c9JKC2FVxcyS9nzvcd2oLjr56XbT/2JAw7iv2f/rZSOhxa0Qx3lvnNMXD5u5iHC2CDtF9F7N+VgCLVx9vLq+gw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <style type="text/css">
 p {
 color: white;
 font-family: helvetica;
 font-size: 12px;
 margin-bottom: 0.5px;
 }

 h1 {
 color: white;
 font-family: helvetica;
 font-size: 14px;
 margin-bottom: 1px;
 }

 .greenbox {
 background-color: #3B7D23;
 border-radius: 10px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 padding: 10px;
 margin: 4px;
 height: 60px;
 width: 120px;
 display: inline-block; 
 vertical-align: middle; 
 align-items: center;
 justify-content: center;
 text-align: center;
 margin-bottom: 5px;
 }

 .bluebox {
 background-color: #156082;
 border-radius: 10px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 padding: 10px;
 margin: 1px;
 height: 60px;
 width: 120;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 }

 .icon {
 color: black;
 font-size: 0px;
 margin-bottom: 0px;
 display: inline-block; 
 vertical-align: middle; 
 margin-left: 10px;
 margin-right: 10px;
 max-height: 10px;
 }
 </style>
</head>
<body>
<table>
 <tr>
 <td rowspan="1" class="bluebox">
 <h1>Metas Individuais</h1>
 <p>@{items('Aplicar_a_cada')?['Metas Individuais']}</p>
 </td>
 <td rowspan="1" style="vertical-align: top;"><span class="icon" style="font-size: 100px;"> }</span></td> 
 <td rowspan="1" style="vertical-align: middle;"></td>
 <td rowspan="1" style="vertical-align: middle;" class="greenbox">
 <h1>Nota Final</h1> 
 <p>@{items('Aplicar_a_cada')?['Nota final']}</p> 
 </td>
 </tr>
 <tr><td></td><td></td></tr> <!-- Duas células vazias adicionadas -->
 <tr>
 <td rowspan="4" class="bluebox">
 <h1>Competências</h1> 
 <p>@{items('Aplicar_a_cada')?['Competências']}</p>
 </td> 
 </tr>
 <tr></tr>
 <tr>
 <td></td>
 </tr>
 <tr>
 <td></td>
 </tr>
</table>

</body>
</html>

Can someone help me?

Categories:

Building flows