如何在使用 CSS 响应式创建按钮时使按钮居中答案

【问题标题】：How to center a button while creating it responsive with CSS如何在使用 CSS 响应式创建按钮时使按钮居中
【发布时间】：2021-07-03 23:23:00
【问题描述】：

我正在使用基本的 HTML、CSS 和 Javascript 来创建一个简单的网络应用程序。当我尝试使用 text-align: center 和其他 CSS 元素来使按钮居中时，我仍然遇到了麻烦。我还试图在框中心内居中文本，但由于未知原因不起作用。到目前为止，我已经使用 margin-left 和 margin-right 来调整按钮，但愿意知道如何将其居中而无需经历所有这些麻烦。

.image {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  margin-top: 40px;
  margin-left: 50px;
}

.image img {
  cursor: pointer;
}

.image img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

.image #mother img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

.image img {
  width: 100px;
  height: 100px;
  text-align: center;
  padding: 10px;
  margin-left: 30%;
}

.button{
  width: 80px;
  height: 40px;
  text-align: center;
  margin: auto;
  display: flex;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgb(43, 43, 219);  
  cursor: pointer;
  border-radius: 2px;
}

.button:hover{
   background-color: #242424;
}
.button:active{
   background-color: #121212;
}

.button > span{
  color: #eeeeee;
  text-align: center;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <title>Good Cop, Bad Cop</title>
  <style>
    .view-image img {
      margin-left: 90px;
    }
  </style>
  <link rel="stylesheet" href="../CSS/landing.css" />
  <link rel="stylesheet" href="../CSS/coach_selection.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />

</head>

<body>
  <nav class="navbar navbar-custom">
    <div class="container-fluid">
      <a class="navbar-brand" href="">
        <img src="../IMAGES/Hamburger_icon.svg" alt="Character" height="35vh" />
      </a>

      <a href="settings.html">
        <ul class="navbar-nav">
          <img src="../IMAGES/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="45vh" />
        </ul>
      </a>
    </div>
  </nav>
  <div class="image">
    <div>
      <button type="button" id="dog-button" class="btn btn-light">
        <img src="../images/dog.png" id="dog" alt="dog">
      </button>
    </div>
    <div>
      <button type="button" id="mother-button" class="btn btn-light">
        <img src="../images/mother.png" id="mother" alt="mother">
      </button>
    </div>
    <div>
      <button type="button" id="soldier-button" class="btn btn-light">
        <img src="../images/military.png" id="soldier" alt="soldier">
      </button>
    </div>
    <div>
      <button type="button" id="teacher-button" class="btn btn-light">
        <img src="../images/teacher.png" id="teacher" alt="teacher">
      </button>
    </div>
    <div class="button" id="button-confirm">
      <span>Confirm</span>
    </div>
    <div class="view-image" style="display:none;">
      <img src="" width="150" height="150" />
      <div class="button" id="button-other"><span>Other</span></div>
    </div>
  </div>
  <div class="fixed-bottom">
    <div class="navbar navbar-custom">
      <div class="container-fluid">
        <div id="grid">
          <div class="bot-nav-img">
            <a href="Journal/journal_main.html">
              <img src="../IMAGES/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="40vh" />
            </a>
          </div>
          <div class="bot-nav-img">
            <a href="landing.html">
              <img src="../IMAGES/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="40vh" />
            </a>
          </div>
          <div class="bot-nav-img">
            <a href="goals.html">
              <img src="../IMAGES/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="40vh" />
            </a>
          </div>
        </div>
      </div>
    </div>
</body>

</html>

【问题讨论】：

标签： html css button textbox center

【解决方案1】：

在 css 中创建完美居中对齐的最快和最简单的方法是使用 flexbox。

一般模式是，给需要它的子元素居中的父元素display: flex;、justify-content: center; 和align-items: center;

对于你的代码，去掉所有的text-align。然后到.button类，已经是display: flex，添加justify-content: center;和align-items: center;

带有文本的 span 元素是按钮的子元素，因此它现在将居中。 span 元素本身不需要任何 CSS 属性来帮助它居中。

.button {
  width: 80px;
  height: 40px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgb(43, 43, 219);  
  cursor: pointer;
  border-radius: 2px;
}

【讨论】：

【解决方案2】：

你能检查下面的代码吗？希望它对你有用。您只需将button 代码添加到.image 类之外，然后将margin 添加到button 之类

.button { 
  margin: 10px auto 0px;
}

请参考此链接：https://jsfiddle.net/yudizsolutions/av9fn6tp/

【讨论】：

太棒了！工作完美，非常感谢。