如何在 Bulma 框架中将元素居中放置在图块内答案

【问题标题】：How can I center an element inside a tile in Bulma framework如何在 Bulma 框架中将元素居中放置在图块内
【发布时间】：2018-07-17 23:40:17
【问题描述】：

我正在为我的网页 CSS 使用 Bulma 框架。我正在使用磁贴功能来设计我的页面。我似乎无法找到如何在磁贴内居中元素。

我在 bulma.css 文件中编写了一个“中心”类，如下所示：

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

不知道该怎么办。有人可以帮帮我吗？

【问题讨论】：

你想做什么？将表单元素居中？
是的，现在输入字段和提交按钮是左对齐的。我希望文本字段居中，下面的提交按钮靠近文本字段的中心。

标签： html css bulma

【解决方案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>

【讨论】：

谢谢！它现在确实处理了提交按钮。然而，文本输入字段从最左边延伸到最右边。无论如何我可以限制文本字段的大小，同时保持居中对齐？
使用style="width:50%;"手动设置输入字段的宽度。
做到了！非常感谢

【解决方案2】：

我认为对您的 .center 类进行一些修改可能会有所帮助。

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

【讨论】：