为什么我不能居中？

debugcn 发表于 Dev

乌斯曼·沙希德

这要死我了。https://leadcheetah.com/dummy.php - 不知道为什么我不能将输入框和提交按钮居中。我试过使用引导列并手动添加 align="center"

<div class="search-container" style="transform: translateY(0px);">

                <!-- Form -->
                <h2 align="center">Search Finder Tool</h2>
                <form method="POST" action="email-extract/email-extractor-service.php" id="findemail">
                <input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value=""><br><br><br>
        <p><input type="submit" class="button" value="Find Emails"></p>
                </form>

                <!-- Browse Jobs
                <div class="browse-jobs">
                    Browse job offers by <a href="browse-categories.html"> category</a> or <a href="#">location</a>
                </div> -->


            </div>

LKG

.search-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

form {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
}

p {
  margin: 0;
}

<div class="search-container">

  <!-- Form -->
  <h2 align="center">Search Finder Tool</h2>
  <form method="POST" action="email-extract/email-extractor-service.php" id="findemail">
    <input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value=""><br><br><br>
    <p><input type="submit" class="button" value="Find Emails"></p>
  </form>

  <!-- Browse Jobs
                <div class="browse-jobs">
                    Browse job offers by <a href="browse-categories.html"> category</a> or <a href="#">location</a>
                </div> -->


</div>

带引导程序的小提琴链接

从form和input和button内联中心按钮退出。我添加了一个父 div form，button所以html也请检查。