Как мне центрировать кнопки с классом?

Рейтинг: 0Ответов: 1Опубликовано: 31.03.2023

Как центрировать по горизонтали кнопки с единым классом в css? Вот мой html код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css"> <!-- css -->
</head>
<body>

  <label id="mynum">0</label><br>
  <button class="btns" id="increase">+</button>
  <button class="btns" id="decrease">-</button>
  <button class="btns" id="reset">сбросить</button>

  <script src="index.js"></script> <!-- js -->
</body>
</html>
css html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Два способа рабочих

.centring-class {
  display: flex;
  justify-content: center;
  column-gap: 5px;
  margin-bottom: 20px;
}
.centring-class2 {
  display: block;
  width: max-content;
  margin: 0 auto;
}
<div id="mynum">0</div><br>
<div class="centring-class">
  <button class="btns" id="increase">+</button>
  <button class="btns" id="decrease">-</button>
  <button class="btns" id="reset">Cбросить</button>
</div>


<div class="centring-class2">
  <div id="mynum">0</div><br>
  <button class="btns" id="increase">+</button>
  <button class="btns" id="decrease">-</button>
  <button class="btns" id="reset">Cбросить</button>
</div>