CSS - H1 Does not align in the center

Question

CSS - H1 Does not align in the center

Asked 4 years, 5 months ago

Viewed 2,311 times

-1

Hello! I made a code in which my logo is an H1 and I want it to always align in the center of the screen. For some reason he doesn’t come out on the left side, I don’t understand why. Can you help me? Thank you!

body{
    background-color: rgb(0, 76, 138);
    box-sizing: border-box;
}
.cabecalho{
    width: 100%;
    background-color: rgb(90, 90, 90);
    color:white;
    text-align: center;
}
nav{
    
    background-color: rgb(36, 40, 51);
}
ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  
}
ul li{
    margin-left:2.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-family:'Poppins' ;
}
ul li:hover{
    background-color: rgb(141, 141, 141);
}
.logo{
    padding-left: 0.5em;
    text-align: center;
    font-size: 3em;
    width: 5em;
    padding-top: 0.4em;
    padding-bottom: 0.2em;
    font-family: 'Bree Serif';
}
.logo span{
    font-style: bold;
    color: rgb(255, 153, 0);
}
.titulo{
    color: white;
    font-family: 'Poppins';
    font-style: bold;
    font-size: 2em;
    text-align: center;
    margin-top: 1em;
}

.habilidades{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 2em;
}
.habildiades_secao-01{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 2em;
}
.figure_html{
    width: 7em;
    background-color: rgb(0, 174, 255);
    padding: 2em;
    border-radius: 2em;
}

.figure_css{
    width: 7em;
    background-color: rgb(255, 153, 0);
    padding: 2em;
    border-radius: 2em;
}

.figure_javascript{
    width: 7em;
    background-color: rgb(255, 72, 0);
    padding: 2em;
    border-radius: 2em;
}

.figure_sql{
    width: 7em;
    background-color: rgb(116, 179, 0);
    padding: 2em;
    border-radius: 2em;
}
.figure_aws{
    width: 7em;
    background-color: rgb(73, 73, 73);
    padding: 2em;
    border-radius: 2em;
}
.figure_aws img{
    height: 8em;
}
.habilidades figure figcaption{
    margin-top: 1em;
    color: white;
    font-family: 'Poppins';
    text-align: center;
}
.habilidades figure img{
    width: 7em;
    height: 8em;
}
.barra_de_habilidades{
    background-color: tomato;
    border-width: 1px;
    width: 95%;
    height: 0.7em;
    text-align: center;
    margin-top: 1em;
    border-radius: 1em;
    padding: 0.3em;
    margin-bottom: 1em;
}
.barra_de_habilidades_dentro_html,
.barra_de_habilidades_dentro_css,
.barra_de_habilidades_dentro_javascript,
.barra_de_habilidades_dentro_sql,
.barra_de_habilidades_dentro_aws{
    background-color: white;
    border-radius: 1em;
    text-align: right;
    padding: 0.2;
    height: 0.7em;
}
.barra_de_habilidades_dentro_html{
    width: 80%;
}
.barra_de_habilidades_dentro_css{
    width: 90%;
}
.barra_de_habilidades_dentro_javascript{
    width: 50%;
}
.barra_de_habilidades_dentro_sql{
    width: 72%;
}
.barra_de_habilidades_dentro_aws{
    width: 80%;
}
.p_de_dentro{
    font-weight: 400;
    font-size: 0.7em;
    margin-right: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

<!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">
    <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="reset.css">
   <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=PT+Sans|Poppins&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="habilidades.css">
    <title>BemRosselli</title>

</head>

<body>
    <header class="cabecalho">
        <h1 class="logo">BEM<span>Rosselli</span></h1>
        <nav>
            <ul>
                <li><a href="http://www.youtube.com">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2 class="titulo">Habilidades</h2>
        <section class="habilidades">
           
            <section class="habilidades_secao-01">
                <figure class="figure_html"> 
                    <img src="img/html.png" alt="Icone da habilidade de HTML">
                    <figcaption>Habilidades de HTML</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_html"><p class="p_de_dentro">80%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_css">
                    <img src="img/css.png" alt="Icone da habilidade de CSS">
                    <figcaption>Habilidades de CSS</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_css"><p class="p_de_dentro">90%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_javascript">
                    <img src="img/javascript.png" alt="Icone da habilidade de JavaScript">
                    <figcaption>Habilidades de JavaScript</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_javascript"><p class="p_de_dentro">50%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_sql">
                    <img src="img/sql.png" alt="Icone da habilidade de SQL">
                    <figcaption>Habilidades de SQL</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_sql"><p class="p_de_dentro">72%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_aws">
                    <img src="img/aws.png" alt="Icone da habilidade de AWS">
                    <figcaption>Habilidades de AWS</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_aws"><p class="p_de_dentro">80%</p></div>
                </div>
            </section>
        </section>
    </main>
    <footer>

    </footer>
</body>

</html>

2 answers

0

Dude, your problem is you’re setting a fixed width on your h1. With this it will be aligned to the left, which is normal with all elements.

The element h1 is a block element that occupies by default the entire width of your container and you are using text-align: center, which is already enough to align the text you have inside to the center. As said, when placing width: 5em you are reducing the width of it, and this is not good because, in addition to changing the nature of the element, the text within it does not necessarily have the same width. See that the text goes beyond the area of h1 (the h1 is the green):

Another thing is that when using padding-left will decentralise the text, as the h1 will have a spacing left of 0.5em making the text a few pixels more to the right.

Just put margin: auto as proposed the other answer is to make up the problem, not to say that does not actually solve, because the text will not be centered, because beyond the problem of padding-left cited, the text is larger than the h1, that is, the text will be much more to the right than to the center, as you can see in this print:

What you have to do is remove the width and the padding-left and reset the default margins of h1, then the element will occupy the whole width and the texto-align: center will do its function, which is to align the text to the center:

body{
    background-color: rgb(0, 76, 138);
    box-sizing: border-box;
}
.cabecalho{
    width: 100%;
    background-color: rgb(90, 90, 90);
    color:white;
    text-align: center;
}
nav{
    
    background-color: rgb(36, 40, 51);
}
ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  
}
ul li{
    margin-left:2.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-family:'Poppins' ;
}
ul li:hover{
    background-color: rgb(141, 141, 141);
}
.logo{
    /* padding-left: 0.5em; */
    text-align: center;
    font-size: 3em;
    /* width: 5em; */
    padding-top: 0.4em;
    padding-bottom: 0.2em;
    font-family: 'Bree Serif';
    margin: 0;
}
.logo span{
    font-style: bold;
    color: rgb(255, 153, 0);
}
.titulo{
    color: white;
    font-family: 'Poppins';
    font-style: bold;
    font-size: 2em;
    text-align: center;
    margin-top: 1em;
}

.habilidades{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 2em;
}
.habildiades_secao-01{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 2em;
}
.figure_html{
    width: 7em;
    background-color: rgb(0, 174, 255);
    padding: 2em;
    border-radius: 2em;
}

.figure_css{
    width: 7em;
    background-color: rgb(255, 153, 0);
    padding: 2em;
    border-radius: 2em;
}

.figure_javascript{
    width: 7em;
    background-color: rgb(255, 72, 0);
    padding: 2em;
    border-radius: 2em;
}

.figure_sql{
    width: 7em;
    background-color: rgb(116, 179, 0);
    padding: 2em;
    border-radius: 2em;
}
.figure_aws{
    width: 7em;
    background-color: rgb(73, 73, 73);
    padding: 2em;
    border-radius: 2em;
}
.figure_aws img{
    height: 8em;
}
.habilidades figure figcaption{
    margin-top: 1em;
    color: white;
    font-family: 'Poppins';
    text-align: center;
}
.habilidades figure img{
    width: 7em;
    height: 8em;
}
.barra_de_habilidades{
    background-color: tomato;
    border-width: 1px;
    width: 95%;
    height: 0.7em;
    text-align: center;
    margin-top: 1em;
    border-radius: 1em;
    padding: 0.3em;
    margin-bottom: 1em;
}
.barra_de_habilidades_dentro_html,
.barra_de_habilidades_dentro_css,
.barra_de_habilidades_dentro_javascript,
.barra_de_habilidades_dentro_sql,
.barra_de_habilidades_dentro_aws{
    background-color: white;
    border-radius: 1em;
    text-align: right;
    padding: 0.2;
    height: 0.7em;
}
.barra_de_habilidades_dentro_html{
    width: 80%;
}
.barra_de_habilidades_dentro_css{
    width: 90%;
}
.barra_de_habilidades_dentro_javascript{
    width: 50%;
}
.barra_de_habilidades_dentro_sql{
    width: 72%;
}
.barra_de_habilidades_dentro_aws{
    width: 80%;
}
.p_de_dentro{
    font-weight: 400;
    font-size: 0.7em;
    margin-right: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

<!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">
    <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="reset.css">
   <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=PT+Sans|Poppins&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="habilidades.css">
    <title>BemRosselli</title>

</head>

<body>
    <header class="cabecalho">
        <h1 class="logo">BEM<span>Rosselli</span></h1>
        <nav>
            <ul>
                <li><a href="http://www.youtube.com">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2 class="titulo">Habilidades</h2>
        <section class="habilidades">
           
            <section class="habilidades_secao-01">
                <figure class="figure_html"> 
                    <img src="img/html.png" alt="Icone da habilidade de HTML">
                    <figcaption>Habilidades de HTML</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_html"><p class="p_de_dentro">80%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_css">
                    <img src="img/css.png" alt="Icone da habilidade de CSS">
                    <figcaption>Habilidades de CSS</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_css"><p class="p_de_dentro">90%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_javascript">
                    <img src="img/javascript.png" alt="Icone da habilidade de JavaScript">
                    <figcaption>Habilidades de JavaScript</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_javascript"><p class="p_de_dentro">50%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_sql">
                    <img src="img/sql.png" alt="Icone da habilidade de SQL">
                    <figcaption>Habilidades de SQL</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_sql"><p class="p_de_dentro">72%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_aws">
                    <img src="img/aws.png" alt="Icone da habilidade de AWS">
                    <figcaption>Habilidades de AWS</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_aws"><p class="p_de_dentro">80%</p></div>
                </div>
            </section>
        </section>
    </main>
    <footer>

    </footer>
</body>

</html>

Thank you! It worked great!

– Bruno Eduardo Rosselli

2020/01/25 at 12:35

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.

by emanoellucas • **886** points · Answer 1 · 2020-01-24T01:44:11+00:00

Bruno, as elements h1 have, by default, display block you can just do in CSS:

h1{ margin: auto; }

With this configuration, all elements h1 are centered horizontally, since, with this configuration, automatic lateral margins are created. The problem of applying this directly to the TAG is that all elements h1 centered. To center a specific one, use your selector.

That said, your code stays like this:

<!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">
    <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="reset.css">
   <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=PT+Sans|Poppins&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="habilidades.css">
    <title>BemRosselli</title>
    <style>
        body{
    background-color: rgb(0, 76, 138);
    box-sizing: border-box;
}
.cabecalho{
    width: 100%;
    background-color: rgb(90, 90, 90);
    color:white;
    text-align: center;
}
nav{
    
    background-color: rgb(36, 40, 51);
}
ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  
}
ul li{
    margin-left:2.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-family:'Poppins' ;
}
ul li:hover{
    background-color: rgb(141, 141, 141);
}
.logo{
    padding-left: 0.5em;
    text-align: center;
    font-size: 3em;
    width: 5em;
    padding-top: 0.4em;
    padding-bottom: 0.2em;
    font-family: 'Bree Serif';
}
.logo span{
    font-style: bold;
    color: rgb(255, 153, 0);
}
.titulo{
    color: white;
    font-family: 'Poppins';
    font-style: bold;
    font-size: 2em;
    text-align: center;
    margin-top: 1em;
}


.habilidades{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 2em;
}
.habildiades_secao-01{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 2em;
}
.figure_html{
    width: 7em;
    background-color: rgb(0, 174, 255);
    padding: 2em;
    border-radius: 2em;
}

.figure_css{
    width: 7em;
    background-color: rgb(255, 153, 0);
    padding: 2em;
    border-radius: 2em;
}

.figure_javascript{
    width: 7em;
    background-color: rgb(255, 72, 0);
    padding: 2em;
    border-radius: 2em;
}

.figure_sql{
    width: 7em;
    background-color: rgb(116, 179, 0);
    padding: 2em;
    border-radius: 2em;
}
.figure_aws{
    width: 7em;
    background-color: rgb(73, 73, 73);
    padding: 2em;
    border-radius: 2em;
}
.figure_aws img{
    height: 8em;
}
.habilidades figure figcaption{
    margin-top: 1em;
    color: white;
    font-family: 'Poppins';
    text-align: center;
}
.habilidades figure img{
    width: 7em;
    height: 8em;
}
.barra_de_habilidades{
    background-color: tomato;
    border-width: 1px;
    width: 95%;
    height: 0.7em;
    text-align: center;
    margin-top: 1em;
    border-radius: 1em;
    padding: 0.3em;
    margin-bottom: 1em;
}
.barra_de_habilidades_dentro_html,
.barra_de_habilidades_dentro_css,
.barra_de_habilidades_dentro_javascript,
.barra_de_habilidades_dentro_sql,
.barra_de_habilidades_dentro_aws{
    background-color: white;
    border-radius: 1em;
    text-align: right;
    padding: 0.2;
    height: 0.7em;
}
.barra_de_habilidades_dentro_html{
    width: 80%;
}
.barra_de_habilidades_dentro_css{
    width: 90%;
}
.barra_de_habilidades_dentro_javascript{
    width: 50%;
}
.barra_de_habilidades_dentro_sql{
    width: 72%;
}
.barra_de_habilidades_dentro_aws{
    width: 80%;
}
.p_de_dentro{
    font-weight: 400;
    font-size: 0.7em;
    margin-right: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

h1{
  margin: auto; <!-- Deixando o elemento h1 centralizado horizontalmente -->
}
    </style>

</head>

<body>
    <header class="cabecalho">
        <h1 class="logo">BEM<span>Rosselli</span></h1>
        <nav>
            <ul>
                <li><a href="http://www.youtube.com">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2 class="titulo">Habilidades</h2>
        <section class="habilidades">
           
            <section class="habilidades_secao-01">
                <figure class="figure_html"> 
                    <img src="img/html.png" alt="Icone da habilidade de HTML">
                    <figcaption>Habilidades de HTML</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_html"><p class="p_de_dentro">80%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_css">
                    <img src="img/css.png" alt="Icone da habilidade de CSS">
                    <figcaption>Habilidades de CSS</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_css"><p class="p_de_dentro">90%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_javascript">
                    <img src="img/javascript.png" alt="Icone da habilidade de JavaScript">
                    <figcaption>Habilidades de JavaScript</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_javascript"><p class="p_de_dentro">50%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_sql">
                    <img src="img/sql.png" alt="Icone da habilidade de SQL">
                    <figcaption>Habilidades de SQL</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_sql"><p class="p_de_dentro">72%</p></div>
                </div>
            </section>

            <section class="habilidades_secao-01">
                <figure class="figure_aws">
                    <img src="img/aws.png" alt="Icone da habilidade de AWS">
                    <figcaption>Habilidades de AWS</figcaption>
                </figure>
                <div class="barra_de_habilidades">
                    <div class="barra_de_habilidades_dentro_aws"><p class="p_de_dentro">80%</p></div>
                </div>
            </section>
        </section>
    </main>
    <footer>

    </footer>
</body>

</html>