按钮粘在div的底部

Question

这是我当前的代码：

#nav {
    height:10vw;
    width:90vw;
    top:0;
    background-color:#d6d6d6;
    padding:20px;
    border:4px solid black;
    margin-bottom:20px;
}
#toFileCreator {
    margin-right:90vw;
    z-index:999;
    margin-bottom:20px;
    margin-left:20px;
}

<div id="nav">
    <h1>
        <center>Web-TXT</center>
    </h1>
    <br>
    <button onclick="Go_to_file_creator()" id="toFileCreator">
        <h1></h1>File creator</h1>
    </button>
</div>

我尝试使用边距和填充来使按钮正确对齐，但它不起作用。它低于代码片段中应有的位置，但在我的代码中要好一些。任何帮助将不胜感激！

Answer 1

您必须在单个

<button>

中使用

<div>

并应用特定的风格

这是更新代码：

#nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d6d6d6;
    padding: 20px;
    border: 4px solid black;
}

#btnStyle {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#toFileCreator {
    display: flex;
    align-items: center;
}

<div id="nav">
    <h1>
        <center>Web-TXT</center>
    </h1>
    <br>
  </div>
<div id="btnStyle">
    <button onclick="Go_to_file_creator()" id="toFileCreator">
        <h1>File creator</h1>
    </button>
</div>