如何使用 css 网格 select 整个网格项目，同时保持项目居中对齐并在悬停时保持静止

Question

我正在制作一个计算器网络应用程序，但在将鼠标悬停在数字/字符上时遇到困难。我把整个计算器变成了一个网格，并用 align-items center 将项目居中对齐。当我这样做并悬停时，只有文本会应用边框底部。当悬停每个数字/项目时，我希望整个网格项目都能获得边框底部。

我试过去掉 align-items:center 并且行得通，但是数字/项目没有居中，我必须使用填充来解决这个问题。即便如此，我还是无法将所有物品放在我想要的地方。例如，我希望等号在它覆盖的三个框之间垂直居中，但当我不得不依赖填充时似乎不可能。

此外，当我将鼠标悬停在项目上时，项目会向上移动，这是不受欢迎的。如果这是一个简单的修复，我将不胜感激。

:root {
  --primary-dark: rgb(170, 172, 252);
  --primary-light: #f29191;
  --background: #eee; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 62.5%; }

body {
  font-family: sans-serif;
  background-color: var(--background);
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400; }

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: min-content repeat(6, 1fr);
  min-height: 65rem;
  max-width: 40rem;
  margin: 20vh auto;
  text-align: center;
  align-items:center;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, 0.2);
  border-radius: 1rem; }
  .calculator__mode {
    color: #fff;
    letter-spacing: 1px;
    margin-top: 1.5rem;
    font-weight: normal;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .calculator__mode:hover {
      transform: translateY(-3px); }
  .calculator__input {
    grid-column: 1/ -1;
    background-color: transparent;
    color: #fff;
    padding: 1rem 5rem 1rem 0rem;
    font-size: 3rem;
    border: none;
    cursor: pointer;
    text-align: right; }
  .calculator .btn {
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    padding-top: 2.7rem; }
    .calculator .btn:hover {
      border-bottom: 5px solid #eee; }
    .calculator .btn:active {
      background-color: var(--primary-light);
      opacity: 50%;
      border: none; }
  .calculator__0 {
    grid-column: 1/ span 1;
    grid-row: 7/ span 1; }
  .calculator__1 {
    grid-column: 1/ span 1;
    grid-row: 6/ span 1; }
  .calculator__2 {
    grid-column: 2/ span 1;
    grid-row: 6/ span 1; }
  .calculator__3 {
    grid-column: 3/ span 1;
    grid-row: 6/ span 1; }
  .calculator__4 {
    grid-column: 1/ span 1;
    grid-row: 5/ span 1; }
  .calculator__5 {
    grid-column: 2/ span 1;
    grid-row: 5/ span 1; }
  .calculator__6 {
    grid-column: 3/ span 1;
    grid-row: 5/ span 1; }
  .calculator__7 {
    grid-column: 1/ span 1;
    grid-row: 4/ span 1; }
  .calculator__8 {
    grid-column: 2/ span 1;
    grid-row: 4/ span 1; }
  .calculator__9 {
    grid-column: 3/ span 1;
    grid-row: 4/ span 1; }
  .calculator__decimal {
    grid-column: 2/ span 1;
    grid-row: 7/ span 1; }
  .calculator__negative {
    grid-column: 3/ span 1;
    grid-row: 7/ span 1; }
  .calculator__clear {
    grid-column: 4/ span 1;
    grid-row: 7/ span 1; }
  .calculator__equal {
    grid-column: 4/ span 1;
    grid-row: 4/span 3;
    padding-top: 10rem; }
  .calculator__plus {
    grid-column: 1/ span 1;
    grid-row: 3/ span 1; }
  .calculator__minus {
    grid-column: 2/ span 1;
    grid-row: 3/ span 1; }
  .calculator__divide {
    grid-column: 3/ span 1;
    grid-row: 3/ span 1; }
  .calculator__multiply {
    grid-column: 4/ span 1;
    grid-row: 3/span 1; }

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Calculator</title>
</head>

<body>
    <div class="container">
        <div class="calculator">
            <h3 class="calculator__mode">Regular</h3>
            <input class="calculator__input" type="text" placeholder="enter here">

            <div class="btn calculator__plus">+</div>
            <div class="btn calculator__minus">&#8722;</div>
            <div class="btn calculator__divide">&#247;</div>
            <div class="btn calculator__multiply">&#215</div>
            <div class="btn calculator__equal">=</div>

            <div class="btn calculator__0">0</div>
            <div class="btn calculator__1">1</div>
            <div class="btn calculator__2">2</div>
            <div class="btn calculator__3">3</div>
            <div class="btn calculator__4">4</div>
            <div class="btn calculator__5">5</div>
            <div class="btn calculator__6">6</div>
            <div class="btn calculator__7">7</div>
            <div class="btn calculator__8">8</div>
            <div class="btn calculator__9">9</div>

            <div class="btn calculator__decimal">.</div>
            <div class="btn calculator__negative">-</div>
            <div class="btn calculator__clear">C</div>

        </div>

    </div>
</body>

</html>

Answer 1

添加 height: 100% 到按钮有效。我还删除了按钮的固定填充并将其更改为显示 flex。将按钮的 CSS 更改为：

.calculator .btn {
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

还记得删除等于按钮的填充：

.calculator__equal {
    grid-column: 4/ span 1;
    grid-row: 4/span 3;
}

如何使用 css 网格 select 整个网格项目，同时保持项目居中对齐并在悬停时保持静止

How to select entire grid item with css grids while keeping items center aligned and still when hovered

html

css

position

positioning

css-grid