如何对齐位于中心的2个容器

Question

我要对此对齐：

HTML view

对此，但位于网站中心：

Desired result

但是它转到左边缘：

The reality

我该如何使其成为网站中心？

我尝试使用一些组合和不同的属性，但结果没有改变。

.container{
    text-align: center;
    position:relative;
}

.inputArea{
    margin: auto;
    display: flow;
}
.deleteArea{
    margin:auto;
    display:inline-block;
}

<div class="container">
    <div class="inputArea" >
        <form  th:action="@{/}" method="post">
            <input   type="text" th:id="inputWord" name="inputWord" />
            <input   type="text" th:id="inputTranslation" name="inputTranslation" />
            <input   type="text" th:id="language" name="language" value="English" />
            <input   type="submit" th:id="addWord" value="add" />
        </form>
    </div>
    <div class="inputArea">
        <form th:action="@{/delete}" method="post">
            <input   type="text" th:id="inputWordDelete" name="inputWordDelete" />
            <input   type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
            <input   type="text" th:id="languageDelete" name="languageDelete" />
            <input   type="submit" th:id="deleteWord" value="delete" />
        </form>
    </div>
</div>

我应该更改我的代码以实现所需的结果吗？

Answer 1

您打算实现这样的目标吗？一种选择是使用CSS网格...

.container{
    text-align: center;
    position: relative;
}

.inputArea form {
    margin: auto;
	display: inline-grid;
	grid-template-columns: auto auto auto minmax(0px, 100px);
	text-align: left;
}

<div class="container">
    <div class="inputArea" >
        <form th:action="@{/}" method="post">
            <input type="text" th:id="inputWord" name="inputWord" />
            <input type="text" th:id="inputTranslation" name="inputTranslation" />
            <input type="text" th:id="language" name="language" value="English" />
	    <div><input type="submit" th:id="addWord" value="add" /></div>
        </form>
    </div>
    <div class="inputArea">
        <form th:action="@{/delete}" method="post">
            <input type="text" th:id="inputWordDelete" name="inputWordDelete" />
            <input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
            <input type="text" th:id="languageDelete" name="languageDelete" />
	    <div><input type="submit" th:id="deleteWord" value="delete" /></div>
        </form>
    </div>
</div>

Answer 2

这是另一种方法。你尝试过吗？

.container {
  width: 100%;
}

.container-inner {
  margin: 0 auto;
  display: table;
}

<div class="container">
  <div class="container-inner">
    <div class="inputArea" >
        <form  th:action="@{/}" method="post">
            <input   type="text" th:id="inputWord" name="inputWord" />
            <input   type="text" th:id="inputTranslation" name="inputTranslation" />
            <input   type="text" th:id="language" name="language" value="English" />
            <input   type="submit" th:id="addWord" value="add" />
        </form>
    </div>
    <div class="inputArea">
        <form th:action="@{/delete}" method="post">
            <input   type="text" th:id="inputWordDelete" name="inputWordDelete" />
            <input   type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
            <input   type="text" th:id="languageDelete" name="languageDelete" />
            <input   type="submit" th:id="deleteWord" value="delete" />
        </form>
    </div>
  </div>
</div>