html - 将表单和按钮的HTML水平居中

我正在使用引导程序进行样式设置。

我设法将其他东西垂直和水平居中，但没有输入和按钮。

输入和按钮显示在页面的左侧。我尝试了不同的引导程序类选项，但无法对其进行管理。

body {
  background-color: whitesmoke;
  height: 90%;
  display: flex;
  align-items: center;
}

html {
  height: 90%;
}

.row {
  text-align: center;
}

.random {
  text-decoration: none;
  margin-bottom: 50px;
}

.icon {
  max-width: 25%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col random">
      <button class="btn btn-primary">
                    <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random article</a>
                </button>
    </div>
  </div>
  <div class="row">
    <form class="col icon">
      <input type="text" class="form-control">
    </form>
    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
  </div>
  <div class="row">
    <div class="col">
      Click icon to search
    </div>
  </div>
</div>

最佳答案

body {
  background-color: whitesmoke;
  height: 90%;
  display: flex;
  align-items: center;
}

html {
  height: 90%;
}

.row {
  text-align: center;
}

.random {
  text-decoration: none;
  margin-bottom: 50px;
}

.icon {
  max-width: 25%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col random">
      <button class="btn btn-primary">
                    <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random article</a>
                </button>
    </div>
  </div>

    <form class="col icon">
    <div class="row">
      <input type="text" class="form-control">
    </div>
    <div class="row">
     <div class="col">
    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
     </div>
    </div>
  </form>


  <div class="row">
    <div class="col">
      Click icon to search
    </div>
  </div>
</div>

关于html - 将表单和按钮的HTML水平居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50377940/