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

Html – How to center a bordered h1 element at the top of a webpage?

I’m trying to wrap my title at the top of my webpage with a border.

But, whenever I do, the text and the border around it shift all the way to the left of the webpage.

I’m trying to do this with an h1 element. I also don’t want to just put a margin value to center it because it then will not scale with different webpage sizes.

#title {
  color: rgb(226, 35, 35);
  display: inline;
}

.borderedTitle {
  border: 2px solid black;
  display: inline-block;
  border-radius: 10px;
  padding: 10px;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}
<span class="borderedTitle">
  <h1 id="title" class="lato-bold">Title</h1>
</span>

I’ve tried different things like text-align: center, align-content: center, etc.

Tags:

3

Answers


  1. 0

    Try this:

    body {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns the content at the top */
    height: 100vh; /* Ensure the body takes up the full viewport height */
    margin: 0;
}

.borderedTitle {
    border: 2px solid black;
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
    text-align: center;
}

#title {
    color: rgb(226, 35, 35);
    display: inline-block;
}

.lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
}
    <div class="borderedTitle">
    <h1 id="title" class="lato-bold">Title</h1>
</div>
    Login or Signup to reply.
  2. 0

    Use a flexbox layout with justify-content: center

    .flex-center {
  display: flex;
  justify-content: center;
}

#title {
  color: rgb(226, 35, 35);
  border: 2px solid black;
  border-radius: 10px;
  padding: 10px;
  margin: 0;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}
    <div class="flex-center">
  <h1 id="title" class="lato-bold">Title</h1>
</div>

    This centres the elements within the flex container and also shrink-wraps them to their content size.

    Login or Signup to reply.
  3. 0

    You don’t even need a wrapper. You can horizontally center a block-level element by giving it a margin-left and margin-right of 0 such as using margin: 0 auto. All you need to do is limit the width of the block-level element to the content by using: width: max-content

    #title {
  width: max-content;
  margin: 0 auto;
  border: 2px solid black;
  border-radius: 10px;
  padding: 10px;
  color: rgb(226, 35, 35);
}
    <h1 id="title">Title</h1>

    If you want to use a container you can even make use of text-align:

    .borderedTitle {
  text-align: center;
}

#title {
  display: inline-block;
  border: 2px solid black;
  border-radius: 10px;
  padding: 10px;
  color: rgb(226, 35, 35);
}
    <div class="borderedTitle">
  <h1 id="title" class="lato-bold">Title</h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search