如何在Bulma框架中让元素居中于瓦片内

Question

我将使用Bulma框架来为我的网页设计CSS样式，使用tiles功能来设计页面。我无法找到如何在tile内居中一个元素。

我已经在bulma.css文件中编写了一个“center”类，具体代码如下：

.center{
  left : 40%;
  right : 20%;
}

对于我正在导入的图像，这似乎有效：

 <div class="tile is-ancestor">
  <div class="tile is-parent">
    <div class="tile is-child ">
      <figure class="image is-64x64 center">
        <img src="/static/img/my_image.png" alt="" >
      </figure>

<!---more code---->
    </div>
  </div>
</div>

但是同样的方法对于图片下面的表单不起作用（仍然在瓷砖内部）：

<form class="center" action="{{url_for('displayGraph')}}" method="post">

    <input class="center" style="width:80%;font-size:12pt;" type="text" name="name" value="" placeholder="How can I help you?">
    <br>
    <br>
    <div class="center">
      <input type="submit" name="submit" value="Ask away!">
    </div>

  </form>

对此不确定该怎么办。请问有人可以帮我吗？

相关it技术方面的问题，需要更多上下文信息才能提供更具体的翻译。

- s_om

---

你想做什么？将表单元素居中显示吗？ - Nuwan Alawatta

是的，现在输入框和提交按钮都是左对齐的。我希望文本框居中，并且下面的提交按钮靠近文本框的中心。 - s_om

Answer 1

使用Bulma中的has-text-centered类来使元素内的文本居中。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet"/>
<form class="has-text-centered" action="{{url_for('displayGraph')}}" method="post">
  <br>
  <br>
  <input style="width:80%;font-size:12pt;" type="text" name="name" value="" placeholder="How can I help you?">
  <br>
  <br>
    <input type="submit" name="submit" value="Ask away!">
</form>

- Nuwan Alawatta

---

谢谢！现在它确实处理了提交按钮。然而，文本输入字段从最左边的极端到最右边的极端都很长。有没有办法在保持居中对齐的同时限制文本字段的大小？ - s_om

请将以下与编程有关的内容从英语翻译成中文。仅返回已翻译的文本：使用 style="width:50%;" 手动设置输入字段的宽度。 - Nuwan Alawatta

搞定了！非常感谢你。 - s_om

Answer 2

我认为在你的.center类中进行一些小修改可能会有所帮助。

.center{
  margin : 0 auto;
  text-align : center;
}

- rony2k6