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

Html – Aligning two elements to the center

How can I make "question" vertically center-aligned with "answer-text", but not with "submit-answer-button"?

.question-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.answer-container {
  display: flex;
  justify-content: center;
}
  <div class="question-container">
    <div id="question">6 x 2</div>
    <div class="answer-container">
      <input type="text" id="answer-text">
      <button id="submit-answer-button" onclick="submitAnswer()">Submit</button>
    </div>
  </div>

This is what I have

This is what I’m looking for

Tags:

2

Answers


  1. 0

    Is that what you’re looking for?

    .root-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
}

.left-col {
   display: flex;
   flex-direction: column;
   align-items: center;
}
    <div class="root-container">
  <div class="left-col">
    <div id="question">4+2</div>
    <input type="text" id="answer-text">
  </div>
  <div class="right-col">
    <button id="submit-answer-button" onclick="submitAnswer()">Submit</button>
  </div>
</div>

    Basically what I did here is put everything in row-directed flexbox, and added two children each represent a column.

    Finaly, I set alignment to the left column, so it is centered.

    Login or Signup to reply.
  2. 0

    Just put the question div and the answer input in the same div and give it the same style as the main container container-1:

    function submitAnswer() {
    let answer = document.getElementById("answer-text");
    if (parseInt(answer.value) == 12) {
        console.log("Correct");
    } else {
        console.log("Incorrect");
    }
}
    .container-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container-2 {
    display: flex;
    justify-content: center;
}
#submit-answer-button {
    margin-top: 18px;
}
    <div class="container-1">
    <div class="container-2">
        <div class="container-1">
            <div id="question">6 X 2</div>
            <input type="text" id="answer-text">
        </div>
        <button id="submit-answer-button" onclick="submitAnswer()">
            Submit
        </button>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search