Entrar Ainda não tem acesso?
2
respostas

Meu texto não fica centralizado, mesmo com text-aling: center;

por Guilherme César Athayde
| 112k xp | 62 posts

https://guiga303.github.io/GuigaByte/ index.html

<!DOCTYPE html>

<html lang = "pt-br">
    <head>
        <meta charset = "UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>GuigaByte</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <div class="cabecalho">
                <h1><img src="logo.jpg" class="logo"></h1>
                <h2>GuigaByte</h2>
                <a href="contato.html">Contato</a>
            </div>
        </header>

        <main>

        </main>

        <footer>

        </footer>
    </body>
</html>

style.css

.logo {
    display: inline-block;
    max-width:200px;
    max-height:150px;
    width: auto;
    height: auto;
}

h1 {
    display: inline-block;
}

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.cabecalho {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

h2 {
    display: inline-block;
    text-align: center;
    margin-left: 150px;
    font-weight: bold;
    font-size: 50px;
}

a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    display: inline-block;

    position: absolute;
    top: 80px;
    right: 0;
}

a:hover {
    color: #C78C19;
    text-decoration: underline;
}
2 respostas
por Rodrigo Vianna Silva
| 91k xp | 29 posts

O motivo do h2 não estar centralizando é devido ao 'display: inline-block'. O text-align como o nome já diz, alinha o texto ao centro do bloco. Ao aplicar o inline-block, o h2, como não foi definido um tamanho para ele, ele passa a ter o tamanho do texto, sendo assim não há espaço para ele centralizar.

Eu comecei os estudos a pouco tempo, e acho position relative e absolute muito chatinho de ficar posicionando. Eu recomendo que você de uma pesquisada sobre flex-box. É muito mais simples e mais prático, aqui na alura tem um curso bem rápido sobre isso e acredito que vá facilitar nos seus estudos.

por Guilherme César Athayde
| 112k xp | 62 posts

Valeu pela resposta Rodrigo, eu acabei fazendo uma "gambiara" pra ficar no meio.

h2 {
    position: absolute;
    top: 55px;
    left: 365px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 50px;
}