如何将两个表格对齐？

Question

我想在我的 C# 项目中以 HTML 格式创建一个登录表单。 这是我目前的结果：

但正如你所见，它非常丑陋，但我无法以一种漂亮的方式对齐它们。我最喜欢的是“Registrieren”位于“用户名”字段上方。

这是我当前的代码以一种简单的方式。但是，如果需要完整的代码，请询问。

<div class="is-flex" style="justify-content:center;align-items:center;height:100%;">
     
   <form id="addGuestOrCompany"> 
         <div class="control">
             <div class="buttonWrapper">
                <button type="submit" id="registerButton" class="button buy">
                    Neu Registrieren
                </button>
             </div>
         </div>
     </form>

     <br />
     <br />
     <br />

     <form id="addGuest"> 
          <fieldset>
              <div class="field">
                 <label class="label subtitle has-text-white" for="userName">Username</label>
                 <input class="input is-success" type="text" placeholder="Username" id="userName" name="userName">
              </div>
          </fieldset>
          <div class="control">
              <div class="buttonWrapper">
                 <button type="submit" id="addGuestBtn" class="button buy">Enter</button>
              </div>
           </div>
     </form>

</div>

我使用 Bulma IO 框架。我希望这是您需要的所有信息。提前致谢！

Answer 1

如果我正确阅读您提供的源代码，则父级设置为

display: flex;

通过它的类“is-flex”？ 如果是这样的话，我能想到的最快的解决方案是添加

flex-direction: column;

到它的样式属性。