问题

Here's the translated content:

目前我的代码显示：

其中第一个（方形）框是一个<input>，而第二个（矩形）框是一个<select>。我遇到了以下问题：

1. 输入的文本不显示在<input>框中；同样，选择的选项也不显示在<select>框中。
2. 绿色按钮应该居中，我尝试使用text-align: center和align-content: center两行代码来实现，但没有成功。
3. 当悬停在按钮上时，按钮应该变大1.1倍，我使用了transition: scale(1.1)这一行代码，但似乎没有效果。

<template>
  <div id="food-info">
    <div class="division center">
      <h3 class="division">香蕉</h3>
      <h4 class="division">份量</h4>
      <input class="division quant-input" />
      <select class="division quant-sizes">
        <option>100克</option>
        <option>大份</option>
      </select>
    </div>
    <div>
      <button class="add-entry center">添加到日记</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>

<details>
<summary>英文:</summary>

Currently my code displays:

[![enter image description here][1]][1]

where the first (squared) box is an ```&lt;input&gt;``` while the second (rectangled) box is a ```&lt;select&gt;```. I&#39;m having the following issues:
1. The inputted text is not showing in the ```&lt;input&gt;``` box; similarly, the chosen option is not showing in the ```&lt;select&gt;``` box.
2. The green button should be centered, which I&#39;ve tried doing with the lines ```text-align: center``` and ```align-content: center```, with no avail.
3. When hovering over the button this one should become 1.1 times larger for which I&#39;ve used the line ```transition: scale(1.1)```, yet the line seems to have no effect.

---

<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>

  [1]: https://i.stack.imgur.com/pl5CJ.jpg

</details>


# 答案1
**得分**: 1

以下是您代码中需要翻译的部分：

1. 你在`.division`上设置了填充，但在`input`元素和`select`元素中没有空间供内容。
2. `align-items`（而不是`-content`）会垂直居中元素，如果你想水平居中任何元素，应该这样做：

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

3. 你应该使用transform而不是transition：

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

请注意，这是代码中需要翻译的部分。

.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>