如何在Bulma框架中调整默认输入框尺寸并使其居中显示？

你当前使用的是Bulma CSS框架，框架默认给输入框设置了100%宽度，所以会占满父容器的全部可用空间。要实现中等尺寸+水平居中的效果，可参考以下两种实现方案：

• 方案1：使用Bulma内置类实现（无需编写额外CSS）
  直接给父容器添加has-text-centered类控制内容居中，给input标签添加内置宽度类控制尺寸即可，修改后代码如下：

  <div class="field is-horizontal has-text-centered">
        <label>储蓄账户:</label>
        <input class ="input is-primary is-half" style="display: inline-block;"> 
  </div>
  

  你可以替换is-half为其他内置宽度类调整尺寸：is-one-third（父容器1/3宽）、is-two-thirds（父容器2/3宽）、is-one-quarter（父容器1/4宽），调整到符合你需要的中等大小即可。

• 方案2：自定义CSS样式（灵活度更高）
  如果你需要精准控制输入框的具体宽度，可以添加以下自定义CSS代码：

  /* 控制父容器内容居中、对齐 */
  .field.is-horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 调整标签和输入框之间的间距 */
  }
  /* 控制输入框最大宽度 */
  .input.is-primary {
    max-width: 350px; /* 可自定义数值调整输入框宽度 */
  }
  

原默认效果参考：

内容的提问来源于stack exchange，提问作者Praveenks