[英]How to select entire grid item with css grids while keeping items center aligned and still when hovered
我正在制作一個計算器 web 應用程序，但在將鼠標懸停在數字/字符上時遇到了困難。 我把整個計算器做成了一個網格，並用 align-items center 將項目居中對齊。 當我這樣做和 hover 時，只有文本應用了邊框底部。 當每個數字/項目懸停時，我希望整個網格項目獲得邊框底部。
我試過取出 align-items:center 並且有效，但是數字/項目沒有居中，我必須使用填充來解決這個問題。 盡管如此，我還是無法將所有物品放在我想要的地方。 例如，我希望等號在它所覆蓋的三個框之間垂直居中，但是當我不得不依賴填充時似乎是不可能的。
此外，當我 hover 越過物品時，物品會向上移動，這是不可取的。 如果這是一個簡單的修復，我將不勝感激任何支持。
: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">−</div> <div class="btn calculator__divide">÷.</div> <div class="btn calculator__multiply">×</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>
向按鈕添加 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;
}
Items flex item左對齊和右對齊，當瀏覽器window縮小時如何居中？
[英]Items flex item is left-aligned and right-aligned, how to center it when the browser window is resized down?
使用 CSS Grid 或 Flexbox 將一行中的兩個項目居中對齊
[英]Center-align an item in a row of two items with CSS Grid or Flexbox
CSS flex-box-如何將單個項目與底部對齊，同時將其他項目保持在頂部
[英]Css flex-box - How to align a single item to the bottom while keeping the other items to the top
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.