html - 树枝中心表单项

Question

我想制作一个表格并将项目水平居中，但我没有设法做到这一点。https://i.stack.imgur.com/3DD5X.png

这是我的代码（除了表单字段之外，所有内容都居中）：

<div class="card top-buffer">
        <h5 class="card-header">Status</h5>

            <div class="card-body align-items-center d-flex justify-content-center">
            <div class="container align-items-center">
                    {% if Status[![enter image description here][1]][1]%}
                    <div class="row justify-content-center">
                        <div class="spinner-grow text-success" role="status">
                            <span class="sr-only">Running</span>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <p>Running</p>
                    </div>
                    {% else %}
                    <div class="row justify-content-center">
                        ❌ Error
                    </div>
                    {% endif %}


              <div class="row justify-content-center">
                  {{ form(notificationForm) }}

              </div>
              <div class="row justify-content-center">

               <p><i>Note: There might be a delay between status changes</i></p>
              </div>
            </div>
        </div>
    </div>

在浏览器中它看起来像这样：

我尝试了不同的css，比如

display: inline-block;
margin-left: auto;
margin-right: auto;

但这没有用

标签： htmlcsstwig

Answer 1

I can't comment so I will answer this way.

I will give an example of what's happening:

<div class="row justify-content-center"> <!-- It tells to center what's inside -->
 <form> <!-- Form will center, but don't pass it to what's inside of it -->
   <input> Something </input> <!-- This one it's not centered because form don't tell it to -->
 </form>

The parent <div class="row justify-content-center"> only says to direct children <form> to center. So the children of <form> won't.

I know you are using bootstrap or something like that, but you can understand better from here

Can you style this form {{ form(notificationForm) }}?