I'm new at this so please bear with me. I'm trying to align the text and their input fields - just like this example - by using the label class in the CSS file (please check below) but for some reason it is not working and I can't figure out what I'm doing wrong. Could someone please help me out?

Here's my code:

/* Set main division background color, color, width, padding, border-radius, box-alignment */

.mainD {
  background-color: white;
  color: black;
  width: 500px;
  padding: 20px;
  border-radius: 25px;
  box-align: center;
}


/* Set fieldset in the center with no border */

fieldset {
  border: none;
  text-align: center;
}


/* Aligns texts and their fields */

label {
  display: inline-block;
  text-align: right;
}

<div >
  <h1>Interest Calculator</h1>
  <fieldset>
    <!---Input box for the amount--->
    <label for="principal">Amount
      <input type="number" id="principal"></label>
    <br><br>
    <!---Slider for the interest rate--->
    <label for="rate" onchange="updateRate()">Interest Rate
      <input type="range" id="rate" min="1" max="10" step="0.25" value="5.25">
      <span id="rate_val">5.25</span>%</label>
    <br><br>
    <!---Dropdown box for the years--->
    <label> No. of Years
      <select id="years">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option></select></label> (additional code..)

  </fieldset>
</div>

CodePudding user response：

You can make use of flexbox to align the items vertically and horizontally. Then use justify-content to space them evenly as well to achieve the effect you want in the picture. See the snippet below:

/* Set main division background color, color, width, padding, border-radius, box-alignment */

.mainD {
  background-color: white;
  color: black;
  width: 500px;
  padding: 20px;
  border-radius: 25px;
  box-align: center;
}


/* Set fieldset in the center with no border */

fieldset {
  border: none;
  text-align: center;
}


/* Aligns texts and their fields */

label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input {
  display: flex;
  width: 300px;
  justify-content: flex-start;
  align-items: center;
}

<div >
  <h1>Interest Calculator</h1>
  <fieldset>
    <!---Input box for the amount--->
    <label for="principal">Amount
      <div ><input type="number" id="principal"></div>
    </label>
    <br><br>
    <!---Slider for the interest rate--->
    <label for="rate" onchange="updateRate()">
      Interest Rate
      <div >
        <input type="range" id="rate" min="1" max="10" step="0.25" value="5.25">
        <span id="rate_val">5.25</span>%
      </div>
    </label>
    <br><br>
    <!---Dropdown box for the years--->
    <label> No. of Years
      <div >
        <select id="years">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </label>
  </fieldset>
</div>

CodePudding user response：

i center everything just to prove it actually center i added border feel free to remove it after

/* Set main division background color, color, width, padding, border-radius, box-alignment */

.mainD {
  background-color: white;
  color: black;
  width: 500px;
  padding: 20px;
  border-radius: 25px;
  box-align: center;
}


/* Set fieldset in the center with no border */

fieldset, h1 {
  border: 2px solid #ff8197;
  text-align: left;
  margin: auto auto auto auto;
  width: 60%;
}


/* Aligns texts and their fields */

label {
  display: inline-block;
  text-align: right;
}

<div >
  <h1>Interest Calculator</h1>
  <fieldset>
    <!---Input box for the amount--->
    <label for="principal">Amount
      <input type="number" id="principal"></label>
    <br><br>
    <!---Slider for the interest rate--->
    <label for="rate" onchange="updateRate()">Interest Rate
      <input type="range" id="rate" min="1" max="10" step="0.25" value="5.25">
      <span id="rate_val">5.25</span>%</label>
    <br><br>
    <!---Dropdown box for the years--->
    <label> No. of Years
      <select id="years">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option></select></label> (additional code..)

  </fieldset>
</div>