CSS Texto não centraliza na tela

Patrick Franco · 12 de julho de 2018

Boa noite,

Estou tentando aprender sobre HTML e CSS e já me deparei com problemas.

Acredito eu que era pro KAT STORE fica centralizado na tela mas não está acontecendo isso. Alguém poderia me ajudar?

DiF · 12 de julho de 2018

@Patrick Franco Olá,

este elemento que você colocou não existe. Apesar de " ser aceito" ele não existe e por isso não funciona o CSS.

Experimente trocar o elemento <stl1> por <p> ou <div>

12 de julho de 2018

Copia e cola esse código abaixo em um html vazio e veja o resultado!

<!DOCTYPE html>
<html lang="en">
<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">
<title> Centralizando texto </title>

<style>
    body{
        background-color: currentColor;
    }
    .stl1{
     font-family: monospace;
        color: aliceblue;
        text-align: center;
        font-size: 15px;
    }
    
    .texto{
        color: azure;
    }
    
    .destaque{
        color: chartreuse;
    }
</style>
</head>

<body>
   
<span class="stl1">Conteudo NÃO Centralizado</span>
<p class="stl1">Outro Conteúdo Centralizado</p>
<h4 class="stl1">Mais Conteúdo Centralizado</h4>

<blockquote class="texto">
   Alguns elementos do HTML são bem específicos em suas características, veja acima que:
   <code class="destaque"><i>span</i></code> não centraliza com o <code class="destaque"><i>text-align</i></code> , porque ele é um elemento inline, ou seja, ele terá a largura do texto dentro dele.
   <br><br>
   Já uma <code><i>div</i></code> e um <code class="destaque"><i>h (heading)</i></code>, são elementos de bloco e abrangerá a largura do contêiner, a menos que uma largura seja definida. 
</blockquote>

</body>
</html>