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

Html – how to center the 3 text to be on same line but different positions

I try to put these things on the same line but for some reason no matter what I do, the gpa ones are being center on the next line down, I want it to be like this:

Credit Hour: 99             GPA: 4            Quantity Point: 87

they are on left side, center, and right side

But instead it does this:

Credit Hour: 99           
                          GPA: 4
                                         Quantity Point: 87

these are on the left side, center, and right side, but on different lines idk why this is not showing correctly

how do I fix this:

I try centering them separately as well as making separate div for both but either is working

const gpaForm = document.getElementById("gpa-form");
const openGpaFormBtn = document.getElementById("gpa-btn");
const openFormBtn = document.querySelector(".options");
const calculatorForm = document.querySelector(".calculator");
const cancelBtn = document.getElementById("cancel-btn");

openGpaFormBtn.addEventListener("click", () => {
  calculatorForm.classList.toggle("hidden");
  openFormBtn.classList.toggle("hidden");
  gpaForm.classList.toggle("hidden");
});

cancelBtn.addEventListener("click", () => {
  calculatorForm.classList.toggle("hidden");
  openFormBtn.classList.toggle("hidden");
  gpaForm.classList.toggle("hidden");
});
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: beige;
}

main {
  /* this part allows the item to be move according */
  display: flex;
  /* this lets the html know that it will move up and down */
  flex-direction: column;
  /* this next 2 lets the html know that everything will be in the center */
  justify-content: center;
  align-items: center;
}


/* spaces everything out and center them */

.options {
  font-size: 25px;
  /* the space between element and box */
  padding: 5px;
  /* the space between element and outside element */
  margin: 5px;
  /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
  position: relative;
  /* Enable the flexbox layout model on the element, treating its direct children as flex items */
  display: flex;
  /* Arrange the flex items vertically from top to bottom */
  flex-direction: column;
  /* Add a 10px gap (space) between each flex item within the flex container */
  gap: 20px;
}

#gpa,
#current-grade,
#final-grade {
  border-width: 2px;
  padding: 2px;
  border-radius: 10px;
}


/* move everything away from the header text */

h1 {
  margin: 20px 0 40px 0;
}

.calculator {
  margin-bottom: 10px;
  background-color: azure;
  /* make the box around the things */
  width: 330px;
  height: 300px;
  border: 5px solid cadetblue;
  border-radius: 8px;
  /* spaces everything out and center them */
  /* move everything away from the box */
  padding: 15px;
  /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
  position: relative;
  /* Enable the flexbox layout model on the element, treating its direct children as flex items */
  display: flex;
  /* Arrange the flex items vertically from top to bottom */
  flex-direction: column;
  /* Add a 10px gap (space) between each flex item within the flex container */
  gap: 20px;
}


/* fix and center everything correctly */

.gpa-tab {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 5px;
}


/* these two adding in btn and tab are for centering the add button */

.adding-in-tab,
.close-btn {
  display: flex;
  justify-content: center;
}

#add-update-btn,
#cancel-btn {
  font-size: 15px;
  align-self: center;
  justify-self: center;
  /* move it down a little */
  margin-top: 20px;
}

#add-update-btn {
  width: 35px;
}

#cancel-btn {
  width: 60px;
}

.hidden {
  display: none;
}

.credit-hour-container {
  /* Use flexbox layout */
  display: flex;
  /* Arrange the children in a row */
  flex-direction: row;
  justify-content: flex-start;
  gap: 2px;
}

.credit-hour-text,
#credit-hour-number {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 2px
}

.gpa-text,
#gpa-number {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2px
}

.qp-text,
#qp-number {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 2px
}

.credit-hour-text,
.gpa-text,
.qp-text #credit-hour-number,
#gpa-number,
#qp-number {
  font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Calculator</title>
</head>

<body>
  <main>
    <h1>Calculator</h1>
    <div class="question">
      <p>What Type Of Calculator</p>
    </div>
    <div class="options">
      <button id="gpa-btn">GPA Calculator</button>
      <button id="current-grade-btn">Current Grade Calculator</button>
      <button id="final-grade-btn">Final Grade Calculator</button>
    </div>
    <div class="calculator hidden">
      <form id="gpa-form" class="hidden">
        <div class="gpa-tab">
          <div class="gpa-container">
            <p class="credit-hour-text">Credit Hours:</p>
            <p id="credit-hour-number">99</p>
            <p class="gpa-text">GPA:</p>
            <p id="gpa-number">4</p>
            <p class="qp-text">Quantity Points:</p>
            <p id="qp-number">87</p>
          </div>
          <label for="name-input" class="task">Name (Optional)</label>
          <input type="text" class="task-control" id="name-input" value="" />
          <label for="credit-hour-input" class="task">Credit Hour</label>
          <input type="number" class="task-control" id="credit-hour-input" required/>
          <label for="gpa-input" class="task">GPA</label>
          <input type="number" class="task-control" id="gpa-input" required/>
        </div>
        <div class="adding-in-tab">
          <button id="add-update-btn" type="submit">Add</button>
        </div>
        <div class="close-btn">
          <button id="cancel-btn" type="button">Cancel</button>
        </div>
      </form>
      <form id="current-grade-form" class="hidden">
        <div class="current-grade-tab">
          <label for=""></label>
        </div>
      </form>
      <dialog id="closing-tab-confirm">
        <form method="dialog">
          <p class="closing-message">Unsaved Changes, Delete?</p>
          <div class="yes-or-no-btn">
            <button id="yes">Yes</button>
            <button id="no">No</button>
          </div>
        </form>
      </dialog>
    </div>
  </main>
  <script src="script.js"></script>
</body>

</html>
Tags:

3

Answers


  1. 0

    Here’s one way. The added inner <div> elements keep the numbers with their label.

    (although personally I wouldn’t use <p> for those inner parts. I’d use <div>)

    .gpa-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gpa-container>div {
  display: flex;
}
    <div class="gpa-container">
  <div>
    <p class="credit-hour-text">Credit Hours:</p>
    <p id="credit-hour-number">99</p>
  </div>
  <div>
    <p class="gpa-text">GPA:</p>
    <p id="gpa-number">4</p>
  </div>
  <div>
    <p class="qp-text">Quantity Points:</p>
    <p id="qp-number">87</p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Flex usually used to the parent element,check the document.

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>
</head>

<body>
  <style>
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background-color: beige;
    }
    
    main {
      /* this part allows the item to be move according */
      display: flex;
      /* this lets the html know that it will move up and down */
      flex-direction: column;
      /* this next 2 lets the html know that everything will be in the center */
      justify-content: center;
      align-items: center;
    }
    /* spaces everything out and center them */
    
    .options {
      font-size: 25px;
      /* the space between element and box */
      padding: 5px;
      /* the space between element and outside element */
      margin: 5px;
      /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
      position: relative;
      /* Enable the flexbox layout model on the element, treating its direct children as flex items */
      display: flex;
      /* Arrange the flex items vertically from top to bottom */
      flex-direction: column;
      /* Add a 10px gap (space) between each flex item within the flex container */
      gap: 20px;
    }
    
    #gpa,
    #current-grade,
    #final-grade {
      border-width: 2px;
      padding: 2px;
      border-radius: 10px;
    }
    /* move everything away from the header text */
    
    h1 {
      margin: 20px 0 40px 0;
    }
    
    .calculator {
      margin-bottom: 10px;
      background-color: azure;
      /* make the box around the things */
      width: 330px;
      height: 300px;
      border: 5px solid cadetblue;
      border-radius: 8px;
      /* spaces everything out and center them */
      /* move everything away from the box */
      padding: 15px;
      /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
      position: relative;
      /* Enable the flexbox layout model on the element, treating its direct children as flex items */
      display: flex;
      /* Arrange the flex items vertically from top to bottom */
      flex-direction: column;
      /* Add a 10px gap (space) between each flex item within the flex container */
      gap: 20px;
    }
    /* fix and center everything correctly */
    
    .gpa-tab {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      gap: 5px;
    }
    /* these two adding in btn and tab are for centering the add button */
    
    .adding-in-tab,
    .close-btn {
      display: flex;
      justify-content: center;
    }
    
    #add-update-btn,
    #cancel-btn {
      font-size: 15px;
      align-self: center;
      justify-self: center;
      /* move it down a little */
      margin-top: 20px;
    }
    
    #add-update-btn {
      width: 35px;
    }
    
    #cancel-btn {
      width: 60px;
    }
    
    .hidden {
      display: none;
    }
    
    .gpa-container {
      display: flex;
      justify-content: space-between;
    }
    
    .gpa-container div {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    
    .credit-hour-text,
    .gpa-text,
    .qp-text #credit-hour-number,
    #gpa-number,
    #qp-number {
      font-size: 12px;
    }
  </style>
  <main>
    <h1>Calculator</h1>
    <div class="question">
      <p>What Type Of Calculator</p>
    </div>
    <div class="options">
      <button id="gpa-btn">GPA Calculator</button>
      <button id="current-grade-btn">Current Grade Calculator</button>
      <button id="final-grade-btn">Final Grade Calculator</button>
    </div>
    <div class="calculator hidden">
      <form id="gpa-form" class="hidden">
        <div class="gpa-tab">
          <div class="gpa-container">
            <div>
              <p class="credit-hour-text">Credit Hours:</p>
              <p id="credit-hour-number">99</p>
            </div>
            <div>
              <p class="gpa-text">GPA:</p>
              <p id="gpa-number">4</p>
            </div>
            <div>
              <p class="qp-text">Quantity Points:</p>
              <p id="qp-number">87</p>
            </div>
          </div>
          <label for="name-input" class="task">Name (Optional)</label>
          <input type="text" class="task-control" id="name-input" value="" />
          <label for="credit-hour-input" class="task">Credit Hour</label>
          <input type="number" class="task-control" id="credit-hour-input" required />
          <label for="gpa-input" class="task">GPA</label>
          <input type="number" class="task-control" id="gpa-input" required />
        </div>
        <div class="adding-in-tab">
          <button id="add-update-btn" type="submit">Add</button>
        </div>
        <div class="close-btn">
          <button id="cancel-btn" type="button">Cancel</button>
        </div>
      </form>
      <form id="current-grade-form" class="hidden">
        <div class="current-grade-tab">
          <label for=""></label>
        </div>
      </form>
      <dialog id="closing-tab-confirm">
        <form method="dialog">
          <p class="closing-message">Unsaved Changes, Delete?</p>
          <div class="yes-or-no-btn">
            <button id="yes">Yes</button>
            <button id="no">No</button>
          </div>
        </form>
      </dialog>
    </div>
  </main>
  <script>
    const gpaForm = document.getElementById("gpa-form");
    const openGpaFormBtn = document.getElementById("gpa-btn");
    const openFormBtn = document.querySelector(".options");
    const calculatorForm = document.querySelector(".calculator");
    const cancelBtn = document.getElementById("cancel-btn");

    openGpaFormBtn.addEventListener("click", () => {
      calculatorForm.classList.toggle("hidden");
      openFormBtn.classList.toggle("hidden");
      gpaForm.classList.toggle("hidden");
    });

    cancelBtn.addEventListener("click", () => {
      calculatorForm.classList.toggle("hidden");
      openFormBtn.classList.toggle("hidden");
      gpaForm.classList.toggle("hidden");
    })
  </script>
</body>

</html>
    Login or Signup to reply.
  3. 0

    p tag is a block element. Which means all the elements are stacked on top of each other.

    If you want to change that you need to use a different display property, like in the below example I am using flex. Flex aligns the element in columns by default.

    Things I have added are a wrapper around each element grp and flex to the container.

    .gpa-container {
  display: flex;
  justify-content: space-between;
}

    <div class="gpa-container">
  <div>
    <p class="credit-hour-text">Credit Hours:</p>
    <p id="credit-hour-number">99</p>
  </div>
  <div>
    <p class="gpa-text">GPA:</p>
    <p id="gpa-number">4</p>
  </div>
  <div>
    <p class="qp-text">Quantity Points:</p>
    <p id="qp-number">87</p>
  </div>
</div>

    const gpaForm = document.getElementById("gpa-form");
const openGpaFormBtn = document.getElementById("gpa-btn");
const openFormBtn = document.querySelector(".options");
const calculatorForm = document.querySelector(".calculator");
const cancelBtn = document.getElementById("cancel-btn");

openGpaFormBtn.addEventListener("click", () => {
  calculatorForm.classList.toggle("hidden");
  openFormBtn.classList.toggle("hidden");
  gpaForm.classList.toggle("hidden");
});

cancelBtn.addEventListener("click", () => {
  calculatorForm.classList.toggle("hidden");
  openFormBtn.classList.toggle("hidden");
  gpaForm.classList.toggle("hidden");
});
    *,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: beige;
}

main {
  /* this part allows the item to be move according */
  display: flex;
  /* this lets the html know that it will move up and down */
  flex-direction: column;
  /* this next 2 lets the html know that everything will be in the center */
  justify-content: center;
  align-items: center;
}


/* spaces everything out and center them */

.options {
  font-size: 25px;
  /* the space between element and box */
  padding: 5px;
  /* the space between element and outside element */
  margin: 5px;
  /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
  position: relative;
  /* Enable the flexbox layout model on the element, treating its direct children as flex items */
  display: flex;
  /* Arrange the flex items vertically from top to bottom */
  flex-direction: column;
  /* Add a 10px gap (space) between each flex item within the flex container */
  gap: 20px;
}

#gpa,
#current-grade,
#final-grade {
  border-width: 2px;
  padding: 2px;
  border-radius: 10px;
}


/* move everything away from the header text */

h1 {
  margin: 20px 0 40px 0;
}

.calculator {
  margin-bottom: 10px;
  background-color: azure;
  /* make the box around the things */
  width: 330px;
  height: 300px;
  border: 5px solid cadetblue;
  border-radius: 8px;
  /* spaces everything out and center them */
  /* move everything away from the box */
  padding: 15px;
  /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
  position: relative;
  /* Enable the flexbox layout model on the element, treating its direct children as flex items */
  display: flex;
  /* Arrange the flex items vertically from top to bottom */
  flex-direction: column;
  /* Add a 10px gap (space) between each flex item within the flex container */
  gap: 20px;
}

.gpa-container {
  display: flex;
  justify-content: space-between;
}


/* fix and center everything correctly */

.gpa-tab {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 5px;
}


/* these two adding in btn and tab are for centering the add button */

.adding-in-tab,
.close-btn {
  display: flex;
  justify-content: center;
}

#add-update-btn,
#cancel-btn {
  font-size: 15px;
  align-self: center;
  justify-self: center;
  /* move it down a little */
  margin-top: 20px;
}

#add-update-btn {
  width: 35px;
}

#cancel-btn {
  width: 60px;
}

.hidden {
  display: none;
}

.credit-hour-container {
  /* Use flexbox layout */
  display: flex;
  /* Arrange the children in a row */
  flex-direction: row;
  justify-content: flex-start;
  gap: 2px;
}

.credit-hour-text,
#credit-hour-number {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 2px
}

.gpa-text,
#gpa-number {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2px
}

.qp-text,
#qp-number {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 2px
}

.credit-hour-text,
.gpa-text,
.qp-text #credit-hour-number,
#gpa-number,
#qp-number {
  font-size: 12px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Calculator</title>
</head>

<body>
  <main>
    <h1>Calculator</h1>
    <div class="question">
      <p>What Type Of Calculator</p>
    </div>
    <div class="options">
      <button id="gpa-btn">GPA Calculator</button>
      <button id="current-grade-btn">Current Grade Calculator</button>
      <button id="final-grade-btn">Final Grade Calculator</button>
    </div>
    <div class="calculator hidden">
      <form id="gpa-form" class="hidden">
        <div class="gpa-tab">
          <div class="gpa-container">
            <div>
              <p class="credit-hour-text">Credit Hours:</p>
              <p id="credit-hour-number">99</p>
            </div>
            <div>
              <p class="gpa-text">GPA:</p>
              <p id="gpa-number">4</p>
            </div>
            <div>
              <p class="qp-text">Quantity Points:</p>
              <p id="qp-number">87</p>
            </div>
          </div>
          <label for="name-input" class="task">Name (Optional)</label>
          <input type="text" class="task-control" id="name-input" value="" />
          <label for="credit-hour-input" class="task">Credit Hour</label>
          <input type="number" class="task-control" id="credit-hour-input" required/>
          <label for="gpa-input" class="task">GPA</label>
          <input type="number" class="task-control" id="gpa-input" required/>
        </div>
        <div class="adding-in-tab">
          <button id="add-update-btn" type="submit">Add</button>
        </div>
        <div class="close-btn">
          <button id="cancel-btn" type="button">Cancel</button>
        </div>
      </form>
      <form id="current-grade-form" class="hidden">
        <div class="current-grade-tab">
          <label for=""></label>
        </div>
      </form>
      <dialog id="closing-tab-confirm">
        <form method="dialog">
          <p class="closing-message">Unsaved Changes, Delete?</p>
          <div class="yes-or-no-btn">
            <button id="yes">Yes</button>
            <button id="no">No</button>
          </div>
        </form>
      </dialog>
    </div>
  </main>
  <script src="script.js"></script>
</body>

</html>

    References:

    1. Block layout in normal flow

    2. Basic concepts of flexbox

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

Back To Top
Search