Code not centred in HTML

Question:
My tabs aren’t centring in my html, I’ve tried multiple different ways but I think it’s something to do with the overlap from other html elements and the css (I want to center tabs__label)


Repl link:
https://replit.com/@JohnnySuriano/JohnnySites#style.css

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel='stylesheet' href="style.css">
  <script src='script.js'></script>
  <title>Johnny-Sites</title>
</head>

<body>
  <div class='content'>
    <div class='title-background'>
      <h1 class='title-main'>Welcome to your JohnnySite</h1>
    </div>
    <h3 class='subtitle-1'>I'm Subtitle #1</h3>
    <p class='paragraph-1'>I am a paragraph. You can put infomation in me. You can click on me as well as evry other
      element to change what
      I
      say. Each element comes with some deafult styling, you can edit that in the editor interface at the bottom on the
      website, each element has an Id connected to it to edit it with. For example, I'm element #1!</p>
    <h3 class='subtitle-2'>I'm Subtitle #2</h3>
    <div class='container'>
      <img src='images/exampleImage1.png' width='10%' class='image-1'>
      <p class='paragraph-2'>I'm paragraph #2, you can also use paragraphs to describe things, such as images. For
        exmaple, the image to the
        right of me is my profile picture. It is very cool, ik</p>
    </div>
    <p class='caption-1'>Or you could use a caption!</p>
    <h3 class='subtitle-3'>I'm Subtitle #3</h3>
    <ul class='ul-1'>
      <li>Thing #1</li>
      <li>Thing #2</li>
      <li>Thing #3</li>
      <li>Thing #4</li>
    </ul>
    <p class='paragraph-3'>You can also make lists, ordered or unordered. (The one above is an unordered list)</p>
    <hr class='hr-1'>
    <p class='paragraph-4'>Above me is a hr element, or a horizontal line element. It is mainly used to break up long
      peices of text of
      infomation. Thats most of the key infomation in this needed to use this website. So have fun designing your own
      epic
      websites!</p>
  </div>
  <div class='tabs'>
    <input type='radio' class='tabs__radio' name='tabs-example' id='tab1' checked>
    <label for='tab1' class='tabs__label'>Tab #1</label>
    <div class='tabs__content'>
      <p>Content for Tab #1</p>
    </div>
    <input type='radio' class='tabs__radio' name='tabs-example' id='tab2'>
    <label for='tab2' class='tabs__label'>Tab #2</label>
    <div class='tabs__content'>
      <p>Content for Tab #2</p>
    </div>
  </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}

.title-background {
  margin-top: 50px;
  margin-bottom: 20px;
}

.title-main {
  font-family: 'Poppins', sans-serif;
  font-weight: bolder;
  font-size: 2rem;
  color: whitesmoke;
  background-repeat: no-repeat;
  padding-bottom: 15px;
  margin: auto;
  height: 200px;
  padding-top: 50px;
  background-color: #3c3c5d;
  border-radius: 20px 20px 0 0;
  width: 70%;
}

.subtitle-1,
.subtitle-2, .subtitle-3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  padding-bottom: 15px;
  font-weight: bold;
}

.paragraph-1 {
  font-family: 'Poppins', sans-serif;
  line-height: 1.5rem;
  width: 70%;
  padding-bottom: 10px;
  margin: auto;
}

.paragraph-2 {
  font-family: 'Poppins', sans-serif;
  width: 50%;
  padding-left: 20px;
  line-height: 1.5rem;
}

.paragraph-3 {
  font-family: 'Poppins', sans-serif;
  line-height: 1.5rem;
  width: 70%;
  padding-bottom: 10px;
  margin: auto;
  padding-top: 15px;
}


.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.caption-1 {
  font-family: 'Poppins', sans-serif;
  margin-right: 50%;
  padding-top: 10px;
}

.ul-1 {
  font-family: 'Poppins', sans-serif;
  list-style-position: inside;
  list-style-type: square;
}

.hr-1 {
  width: 50%;
  margin: auto;
}

.paragraph-4 {
  font-family: 'Poppins', sans-serif;
  line-height: 1.5rem;
  width: 70%;
  padding-bottom: 10px;
  margin: auto;
  padding-top: 10px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 400px;
  font-family: 'Poppins', sans-serif;
  margin: auto;
}

.tabs__label {
  padding: 10px 16px;
  cursor: pointer;
  padding-top: 20px;
}

.tabs__radio {
  display: none;
}

.tabs__content {
  order: 1;
  width: 100%;
  border-bottom: 3px solid #ddd;
  line-height: 1.5rem;
  font-size: 0.9rem;
  display: none
}

.tabs__radio:checked+.tabs__label {
  font-weight: bold;
  color: blue;
  border-bottom: 2px solid blue;
}

.tabs__radio:checked+.tabs__label+.tabs__content {
  display: initial;
}

To center the tabs in your HTML code, you can update your CSS as follows:

.tabs {
  display: flex;
  justify-content: center; /* Add this line */
  flex-wrap: wrap;
  max-width: 400px;
  font-family: 'Poppins', sans-serif;
  margin: auto;
}

.tabs__label {
  padding: 10px 16px;
  cursor: pointer;
  padding-top: 20px;
  margin: 0 auto; /* Add this line */
}

By adding justify-content: center; to the .tabs class, it will center the tabs horizontally. And by adding margin: 0 auto; to the .tabs__label class, it will center the individual tab labels horizontally within their respective containers.

This will help center the tabs and their labels in your HTML layout.

4 Likes

Sorry if I wasn’t specific enough, your solution centres them like this
Screenshot 2023-07-29 11.18.33

But I want them closer together, like this
Screenshot 2023-07-29 11.18.19

Sorry for any inconvenience caused

To adjust the spacing between Tab #1 and Tab #2, you can modify the CSS for the tabs__label class. Currently, it has a padding-top property set to 20px, which adds space between the label and the content. You can reduce this value to decrease the spacing between the tabs.

Here’s the updated CSS code:

.tabs__label {
  padding: 10px 16px;
  cursor: pointer;
  padding-top: 10px; /* Adjust this value to control the spacing */
}

Set the desired value for the padding-top property to achieve the desired spacing between the tabs.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.