HTML Centralizar texto e botão em CSS/HTML

mathiasdataamerica · 8 de janeiro de 2020

Oi, pessoal!

Estou fazendo um layout para disparar em email marketing, mas não estou conseguindo centralizar o texto e o botão em CSS.

Tentei usar o text-align: center; e align-items: center; mas não resolveu.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style type="text/css">

        @font-face {
        font-family: "BarlowSemiCondensed-Medium";
        src: url("\Fontes\Patch Tools\BarlowSemiCondensed-Medium.otf"); /* para IE */
        src: local("BarlowSemiCondensed-Medium"), url("\Fontes\Patch Tools\BarlowSemiCondensed-Medium.otf") format("opentype");
        }

        @font-face {
        font-family: "barlowsemicondensed-light";
        src: url("\Fontes\Patch Tools\barlowsemicondensed-light.otf"); /* para IE */
        src: local("barlowsemicondensed-light"), url("\Fontes\Patch Tools\barlowsemicondensed-light.otf") format("opentype");
        }

        @font-face {
        font-family: "BarlowSemiCondensed-SemiBold";
        src: url("\Fontes\Patch Tools\BarlowSemiCondensed-SemiBold.otf"); /* para IE */
        src: local("BarlowSemiCondensed-SemiBold"), url("\Fontes\Patch Tools\BarlowSemiCondensed-SemiBold.otf") format("opentype");
        }
    
        .cab-info{
            text-align: center;
            font-family: BarlowSemiCondensed-Medium;
            padding: 15px    
        }
 
        .cab-logo{
            text-align: center;
            background-color: #FED24E;
            padding-top: 10px;
            padding-left: 0px;
            padding-right: 0px;
            padding-bottom: 10px;
        }

        .destaque{
            text-align: center;
            background-color: #1C63D9;
            font-family: barlowsemicondensed-light;
            padding-top: 40px;
            padding-left: 0px;
            padding-right: 0px;
            padding-bottom: 40px;
            align-items: center;
        }

        .cab-dest-texto{
            width: 600px;
            text-align: center;
            color: white;
            padding-top: 20px;
        }

        .bg-conteudo{
            width: 600px;
            text-align: center;
            align-items: center;
            color: #EDEDED;
            padding-top: 20px;
        }

        .botao-calltoaction{
            align-items: center;
            background-color: #FED24E;
            font-family: BarlowSemiCondensed-SemiBold;
            width: 200px;
            height: 50px;
            line-height: 50px;
            border-radius: 7px;
            margin: 25px;
        }
        
    </style>

</head>
<body>
    <div class="cab-info">DADOS DE CONTATO</div>
    <div class="cab-logo">
        <img src="\MKT\logo.png">
    </div>

    <div class="destaque">
        <img src="\MKT\destaque.png"><br>
        <div class="cab-dest-texto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, earum quibusdam molestias soluta numquam harum culpa aspernatur velit quae quia. Blanditiis culpa, commodi ad eligendi corrupti eum laudantium optio corporis?</div>
        <div class="botao-calltoaction">CALL TO ACTION</div>
    </div>

    <div class="bg-conteudo">
    </div>

</body>
</html>