Html Question posted in
Some basic documentation can be found here.

Html – Why does the title gets off-centre when I apply the width?

I’m practicing selectors and decorations, and I set the title to be centered and I want it to have a background of a certain color and it to be the same size as the text, not to occupy the whole screen, but when I apply the width it gets displayed in the left and I don’t know how to fix it

body {
  background-color: #302e2f;
}

p {
  /*aplica el estilo a todos los 'p' */
  text-align: center;
  color: rgb(245, 211, 16);
}

p span {
  display: block;
}

.titulo {
  text-align: center;
  color: #f540ec;
  font-size: 30px;
  padding: 30px;
  background-color: lightblue;
  width: fit-content;
}

h1,
h2,
h3 {
  padding: 3px;
  text-align: center;
  color: rgba(21, 253, 0, 0.3);
  font-family: verdana;
}
<div class="titulo">Intro de Elden Ring</div>
<p>
  <span>La hojarasca nos cuenta una historia.</span>
  <span>El Gran Círculo de Elden ha sido destruido.</span>
  <span>En nuestro hogar, al otro lado de la niebla, las Tierras Intermedias.</span>
</p>
<h1>XD</h1>
<h2>XD</h2>
<h3>XD</h3>
Tags:

4

Answers


  1. 0

    Add "margin: 0 auto" in titulo class

    .titulo {
   text-align: center;
   color: #f540ec;
   font-size: 30px;
   padding: 30px;
   background-color: lightblue;
   width: fit-content;
   margin: 0 auto;
}
    Login or Signup to reply.
  2. 0

    div tags have a width of 100% of their containing element by default. When the width is set to less than the width of the containing element, they’re adjusted to the left, because they are block-level elements and are typically rendered with a default style that causes them to start on a new line and be adjusted to the left side of their containing element. Due to that, your title is displayed at the left side.

    There are several ways to center your title. One of them was already mentioned in another answer, but for completeness: Add margin: 0 auto; to the CSS of the titulo class. That tells the browser, that the margin should be 0 for the top and bottom and auto for the left and right, which means "as much margin as possible". As that is for left and right, it results in centering the div horizontally.

    Another option would be, to change the CSS of the body to the following:

    body {
  background-color: #302e2f;
  display: flex;
  flex-direction: column;
  align-items: center;
}

    But that has also other side-effects, that you may not want. Take a look here for example to learn more about Flexbox.

    A third option would be to set text-align: center; to the body and display: inline-block; to the titulo class CSS. As the default value of display is block, it needs to be changed, so the titulo div is affected by the text-align of the body.

    Nice to know is, that some properties, like text-align are inherited, so you could declare it for example only at the body and it works for all tags inside the body too. If there is then a specific element, you don’t want to have this property-value, you can specify something else only for that element and write less CSS in total. If that’s useful or not, depends on what you want to use most of the time.

    Login or Signup to reply.
  3. 0

    you can just add a margin and it will center it as below:

    .titulo {
    text-align: center;
    color: #f540ec;
    font-size: 30px;
    padding: 30px;
    background-color: lightblue;
    width: fit-content;
    margin: 0 auto; /* This centers the div horizontally */
}
    <!DOCTYPE html>
<html>
    <head>
        <title></title>
    <style>
            body {
                background-color: #302e2f;
            }

            p {        /*aplica el estilo a todos los 'p' */
                text-align: center;
                color: rgb(245, 211, 16);
            }

            p span {
                display: block;
            }
            h1, h2, h3 {
                padding: 3px;
                text-align: center;
                color: rgba(21, 253, 0, 0.3);
                font-family: verdana;
            }
    </style>
    </head>
<body>
    <div class="titulo">Intro de Elden Ring</div>
    <p>
        <span>La hojarasca nos cuenta una historia.</span>
        <span>El Gran Círculo de Elden ha sido destruido.</span>
        <span>En nuestro hogar, al otro lado de la niebla, las Tierras Intermedias.</span>
    </p>
    <h1>XD</h1>
    <h2>XD</h2>
    <h3>XD</h3>
</body>
</html>
    Login or Signup to reply.
  4. 0

    I think the issue is that applying a fixed width (width: fit-content;) to the element with .titulo class disrupts the centering you set with text-align: center;.

    Try this;
    Use display: inline-block;
    Change the .titulo class to include this property:

    .titulo {
  text-align: center;
  color: #f540ec;
  font-size: 30px;
  padding: 30px;
  background-color: lightblue;
  width: fit-content;
  display: inline-block;
}

    By setting display: inline-block;, the element behaves like an inline element (centered within its containing element) but allows you to define a width using width: fit-content;.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search