我正在将Bulma框架用于网页的CSS。我正在使用图块功能来设计页面。我似乎找不到如何在图块内部居中放置元素的方法。
我在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>
不知道该怎么办。有人可以帮我吗?
答案 0 :(得分: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>
答案 1 :(得分:0)
我认为您对.center类进行一些修改可能会有所帮助。
.center{
margin : 0 auto;
text-align : center;
}