如何在 semantic-ui 网格中居中单列

Question

我想在登录页面中将登录表单居中。表格在桌面上居中，在移动设备上全宽。我试过这个，但它不起作用。我有这个。

    <div class="ui middle aligned center aligned grid">
    <div class="column">
        
        <div class="ui error message">
            <p>Your username and password didn't match. Please try again.</p>
        </div>
        
        <form method="post" class="ui large form error">
            <div class="ui stacked segment">
             
                {% for field in form %}
                <div class="field {% if field.field.required %}required{% endif %}">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        {{ field }}
                    </div>
                </div>
                {% endfor %}
                <button type="submit" value="Send" class="ui primary button">Log in</button>
            </div>
        </form>
    </div>
</div>

Answer 1

尝试使用这些类设置您的列：“十六宽平板电脑十二宽计算机列”...平板电脑也适用于移动设备。

        <div class="sixteen wide tablet twelve wide computer column">

            <div class="ui error message">
                <p>Your username and password didn't match. Please try again.</p>
            </div>

            <form method="post" class="ui large form error">
                <div class="ui stacked segment">

                    {% for field in form %}
                    <div class="field {% if field.field.required %}required{% endif %}">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            {{ field }}
                        </div>
                    </div>
                    {% endfor %}
                    <button type="submit" value="Send" class="ui primary button">Log in</button>
                </div>
            </form>
        </div>
    </div>```

如何在 semantic-ui 网格中居中单列

How to center a single colum in semantic-ui grid

css

semantic-ui