Entrar Ainda não tem acesso?
1
resposta

alinhamento dentro da <tr>

Referente ao curso Email Marketing Responsivo parte 1: sua newsletter adaptável

por Natalia Oliveira
| 211.5k xp | 11 posts

Olá, estou replicando um e-mail para treinar e estou com uma dificuldade de alinhar a imagem de um ícone com um texto dentro de uma "tr". Teria um jeito de fazer sem criar uma nova sub-tabela para dispor os dois lado a lado?

Segue abaixo a parte do código que eu criei dessa seção em particular:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--Campaing monitor recomenda o transitional (2012)-->

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Aprovação BoaCompra</title>
        <!-- Use the latest (edge) version of IE rendering engine -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>

    <body>
        <table>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td width="200" class="cartao">
                                <table>
                                    <tr>
                                        <td>
                                            <br>

                                            <span class="cartao-titulo">Forma de pagamento:</span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>

                                            <img src="icone-cartao.png" alt=""> 
                                            <span class="cartao-texto">Débito</span>
                                        </td>
                                    </tr>
                                </table>
                            </td>

                            <td width="150"></td>

                            <td width="200" class="cartao">
                                <table>
                                    <tr>
                                        <td>
                                            <br>

                                            <span class="cartao-titulo">Data: </span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>

                                            <span class="cartao-texto">##/##/## - ##:##</span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <br>
                </td>
            </tr>
        </table>

    </body>
</html>
1 resposta
por Sarah Ocy Sousa Medeiros
| 1807.9k xp | 3740 posts
Alura Scuba Team Monitora de Fórum Ops

Oi, Natalia! Tudo bem?

Para alinharmos dois elementos, um ao lado do outro, podemos utilizar uma ferramenta chamada Flexbox no CSS para nos auxiliar.

O Flexbox é uma forma mais prática de posicionar elementos em um container. Dessa forma podemos alterar o CSS do nosso projeto, dispondo os textos e a imagem da seguinte maneira:

        <div class="flex-container">
            <div><span class="cartao-titulo">Forma de pagamento:</span></div>
            <div><img src="https://cdn.icon-icons.com/icons2/1380/PNG/512/vcsnormal_93488.png" alt=""> </div>
            <div><span class="cartao-texto">Débito</span></div>
          </div>

Após isso, criamos um arquivo CSS, nomeado style.css e acionaremos o Flexbox por meio dos comandos:

.flex-container{
    display: flex;
    align-items: center;
}

Não podemos esquecer, também, de linkar o nosso arquivo CSS ao nosso código HTML, adicionando o comando abaixo no nosso head:

 <link rel="stylesheet" href="style.css">

Deixo como indicação complementar a leitura do artigo da Alura abaixo, que descreve com mais detalhes o que é e como funciona o Flexbox no CSS:

Espero ter ajudado! Qualquer dúvida estou à disposição!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓