如何使两个容器中，关于中心奠定

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

这里是另一种方式来做到这一点。您是否尝试过这个？

.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>

Answer 2

你打算实现这样的事情？一种选择是使用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>