Question

这是在扼杀我。 https://leadcheetah.com/dummy.php - 不确定为什么我不能将输入框和提交按钮居中。我尝试过使用bootstrap列并手动添加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>

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

<强> fiddle link with bootstrap

从form以及input和button内联中心关闭。我为form和button添加了父div，因此请同时检查html。

<强> Edit as your requirement

Answer 2

不使用Flexbox（因为在许多浏览器中不支持）

您的标记应与以下内容类似

<form method="POST" action="email-extract/email-extractor-service.php" id="findemail" style="width: 100%;text-align: center;margin: auto;">
    <input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value="">
    <input type="submit" class="button" value="Find Emails">
</form>

调整后的样式

#findemail {
    width: 100%;
    text-align: center;
    margin: auto;
}

从float:left移除margin-right: 2%和.search-container input并向其添加margin: auto;。

Result

修改：此外，请务必删除<br>代码。

Answer 3

在您希望居中的所有组件上，确保存在以下样式并且它们不会被覆盖。

margin-right: auto;
margin-left: auto;

还注意到有一个向左飘浮; 必须从CSS中删除。

希望它有所帮助。

为什么我不能把这个放在中心？

3 个答案: