CSS，如何使按钮在div框内居中？

zxlwwiss 于 2023-01-10 发布在其他

关注(0)|答案(3)|浏览(138)

这是我第一次发帖我是前端网页开发的新手，我很难定位我的一些元素，尤其是这个，每次我改变一些东西，它不符合我想要的按钮位置，我只需要居中。

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-around;
  background: #1B244A;
  width: 575px;
  height: 385px;
}

h3 {
  text-align: center;
  color: white;
  font-size: 40px;
  position: relative;
  top: 25px;
}

.scoreBox {
  background: black;
  width: 155px;
  height: 120px;
  border-radius: 5px;
  text-align: center;
}

.scoreBox h1 {
  font-size: 90px;
  color: red;
  padding: 10px 0;
  font-family: 'cursed timer', sans-serif;
}

.scoreBtn {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.scoreBtn button {
  background-color: transparent;
  width: 45px;
  height: 45px;
  border-color: #9AABD8;
  border-radius: 5px;
  color: white;
}

.newGame {}

.newGame button {}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="container">
    <div class="homeTitle">

      <h3>HOME</h3>
      <div class="scoreBox">
        <h1 id="scoreHome">0</h1>
      </div>

      <div class="scoreBtn">
        <button onclick="plusOneHome()">+1</button>
        <button onclick="plusTwoHome()">+2</button>
        <button onclick="plusThreeHome()">+3</button>
      </div>
    </div>

    <div class="guestTitle">
      <h3>GUEST</h3>
      <div class="scoreBox">
        <h1 id="scoreAway">0</h1>
      </div>

      <div class="scoreBtn">
        <button onclick="plusOneAway()">+1</button>
        <button onclick="plusTwoAway()">+2</button>
        <button onclick="plusThreeAway()">+3</button>
      </div>
    </div>

    <div class="newGame">
      <button>New Game</button>
    </div>

  </div>
  <script src="index.js"></script>
</body>

</html>

我正在尝试弄清楚如何将新的游戏按钮居中，我将它放在一个名为newGame的div类中，它总是位于右上角。

css

来源：https://stackoverflow.com/questions/75027180/css-how-to-center-the-button-inside-the-div-box

3条答案

按热度按时间

vcirk6k61#

您可以使用flex或text-align将按钮在div中居中。
使用Flex：

.newGame{
   display: flex;
   justify-content: center;
}

.newGame button{}

使用文本对齐：

.newGame{
   text-align: center;
}

.newGame button{
   display: inline-block;
}

赞(0）回复(0）举报 2023-01-10

eoxn13cs2#

试试这个，看看它是否适合你，你总是可以根据你的需要改变值来匹配按钮的位置。

.newGame{
  position: absolute;
  left: 15%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
}

I guess this is what you are expecting

赞(0）回复(0）举报 2023-01-10

n8ghc7c13#

使用弹性属性**align-items：center;**表示当flex-direction处于水平方向时，将任何div元素垂直居中

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-around;
  background: #1b244a;
  width: 575px;
  height: 385px;
}
h3 {
  text-align: center;
  color: white;
  font-size: 40px;
  position: relative;
  top: 25px;
}

.scoreBox {
  background: black;
  width: 155px;
  height: 120px;
  border-radius: 5px;
  text-align: center;
}

.scoreBox h1 {
  font-size: 90px;
  color: red;
  padding: 10px 0;
  font-family: "cursed timer", sans-serif;
}

.scoreBtn {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.scoreBtn button {
  background-color: transparent;
  width: 45px;
  height: 45px;
  border-color: #9aabd8;
  border-radius: 5px;
  color: white;
}
.newGame {
  display: flex;
  align-items: center;
}

.newGame button {
}

<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <div class="homeTitle">
        <h3>HOME</h3>
        <div class="scoreBox">
          <h1 id="scoreHome">0</h1>
        </div>

        <div class="scoreBtn">
          <button onclick="plusOneHome()">+1</button>
          <button onclick="plusTwoHome()">+2</button>
          <button onclick="plusThreeHome()">+3</button>
        </div>
      </div>

      <div class="guestTitle">
        <h3>GUEST</h3>
        <div class="scoreBox">
          <h1 id="scoreAway">0</h1>
        </div>

        <div class="scoreBtn">
          <button onclick="plusOneAway()">+1</button>
          <button onclick="plusTwoAway()">+2</button>
          <button onclick="plusThreeAway()">+3</button>
        </div>
      </div>

      <div class="newGame">
        <button>New Game</button>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

赞(0）回复(0）举报 2023-01-10

我来回答

CSS，如何使按钮在div框内居中？

3条答案

相关问题

热门标签

最新问答