當前我的代碼顯示:

其中第一個方框是& lt輸入& gt而第二個(矩形)框是一個& lt選擇& gt。我遇到了以下問題:

輸入的文本沒有顯示在& lt輸入& gt盒子；同樣，選擇的選項不會顯示在& lt選擇& gt盒子。 綠色按鈕應該居中，我已經試過用text-align: center和align-content: center這樣做了，但是沒有用。 當鼠標懸停在按鈕上時，這個應該會變大1.1倍，為此我使用了線條過渡:縮放(1.1)，但是線條似乎沒有任何效果。

<template>
  <div id="food-info">
    <div class="division center">
      <h3 class="division">Banana</h3>
      <h4 class="division">Serving size</h4>
      <input class="division quant-input" />
      <select class="division quant-sizes">
        <option>100g</option>
        <option>large</option>
      </select>
    </div>
    <div>
      <button class="add-entry center">Add to Diary</button>
    </div>
  </div>
</template>

<style scoped>
.center {
  text-align: center;
  align-content: center;
}
.division {
  display: inline-block;
  padding: 1rem 1rem;
}
.quant-input {
  height: 10px;
  width: 10px;
}
.quant-sizes {
  height: 10px;
  width: 80px;
  top: 40px;
}
.add-entry {
  width: 300px;
  background-color: #4caf50;
  color: white;
  border-radius: 10px 10px 10px 10px;
}
.add-entry:hover {
  transition: scale(1.1);
}
</style>

你的代碼中有幾個錯誤:

你設置了填充。除法運算，輸入元素和選擇元素中沒有空間容納您的內容 對齊-項目(非內容)垂直居中元素如果要水平居中任何元素，應該這樣做:

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

你應該使用變換而不是過渡

.add-entry:hover {
    transform: scale(1.1);
}

檢查這個:

/* add this codes to variables.css */

      :root {
        --primary-color: #4caf50;
        --text-color: #fff;
      }

      /* add this code to your reset.css */

      :root {
        font-size: 16px;
      }

      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font: inherit;
      }

      h1 {
        font-weight: bold;
        font-size: 1.25rem
      }

      button {
        outline: none;
      }

      /* add this code to utilities.css */

      .p-2 {
        padding: 0.5rem;
      }

      .p-4 {
        padding: 1rem;
      }

      .mb-4 {
        margin-bottom: 1rem;
      }

      .flex {
        display: flex;
      }

      .column {
        flex-direction: column;
      }

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

      .justify-space-between {
        justify-content: space-between;
      }

      .w-full {
        width: 100%;
      }

      .rounded-pill {
        border-radius: 500rem;
      }

      /* add this codes to your components.css */
      .btn {
        background-color: var(--primary-color);
        color: var(--text-color);
        border: none;
        padding: 0.5rem;
        transition: all 0.5s;
      }

      .btn:hover {
        transform: scale(1.02);
      }
      
      /* then import all of these file in your main css */

<div class="p-4 mb-4 flex column justify-center">
      <h1 class="mb-4">Banana</h1>

      <div class="flex justify-space-between">
        <h2>Serving size</h2>
        <div>
          <input class="p-2" />
          <select class="p-2">
            <option>100g</option>

            <option>large</option>
          </select>
        </div>
      </div>
    </div>
    <div class="p-4">
      <button class="btn w-full rounded-pill">Add to Diary</button>
    </div>