如何使用 CSS 將文本垂直居中在一個圓圈中
[英]How do I use CSS to center text vertically in a circle
問題描述
我有一個圓圈網格，在每個圓圈中我都試圖顯示垂直居中的文本。 無論我嘗試什么，到目前為止都沒有任何效果。
代碼在 codepen 上： https ://codepen.io/slurmclassic/pen/bGvBJPJ
我的 HTML 看起來是這樣的：
<div class="grid">
<a class="grid-item" href = 'linka'><span>Text A</span></a>
<a class="grid-item" href = 'linkb'><span>Text B</span></a>
<div class="grid-item" ><span>Company Logo</span></div>
<a class="grid-item" href = 'linkc'><span>Text C</span></a>
<a class="grid-item" href = 'linkd'><span>Text D</span></a>
</div>
我的 CSS 看起來像這樣：
.grid {
width: 100%;
max-width: 500px;
margin: 0 auto;
background: #CCC;
}
.grid::after {
content: "";
display: block;
clear: both;
}
.grid-item {
text-decoration: none;
overflow: hidden;
width: 48%;
padding-bottom: 48%;
background-color: rgba(124, 139, 224, 0.8);
border-radius: 50%;
float: left;
margin: 1%;
margin-top: -4%;
color: black;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.grid-item > span {
color: black;
text-align: center;
display: table-cell;
vertical-align: middle;
align-items: center;
justify-content: center;
text-align: center;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2) {
margin-top: 1%;
}
.grid-item:nth-child(3n + 3) {
margin-left: 25%;
}
.grid-item:nth-child(3n + 4) {
clear: left;
}
我試圖將文本放在跨度中，以便我可以嘗試將問題與“網格項”類分開來解決，但這並沒有幫助。
我可以通過應用將文本向下移動的變換來蠻力，但必須有更好的方法來做到這一點。
我試過 text-align: center, align-items: center, justify-content: center, vertical-align: middle。 我嘗試將 line-height 設置為 font-size ，但這也無濟於事。
任何想法都將不勝感激，任何可證明的解決方案也將不勝感激，謝謝。
3 個解決方案
解決方案1
2 已采納 2022-07-15 15:49:17
我相信這里的問題是.grid-item上的padding-bottom 。 嘗試將其替換為aspect-ratio: 1/1;
如果您需要支持不兼容aspect-ratio ，您可以嘗試使用偽元素，如::after和padding-bottom: 100%來實現縱橫比技巧。 有關此的更多信息： https ://css-tricks.com/aspect-ratio-boxes/
解決方案2
1 2022-07-15 16:35:14
我在 css 中做了一些更改，但結果是想要的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .grid { width: 100%; max-width: 500px; margin: 0 auto; background: #CCC; } .grid::after { content: ""; display: block; clear: both; } .grid-item { text-decoration: none; overflow: hidden; width: 200px; height: 200px; background-color: rgba(124, 139, 224, 0.8); border-radius: 50%; float: left; margin: 5%; margin-top: -4%; color: black; display: flex; align-items: center; justify-content: center; } .grid-item > span { color: black; } .grid-item:nth-child(1),.grid-item:nth-child(2) { margin-top: 1%; } .grid-item:nth-child(3n + 3) { margin-left: 30%; } .grid-item:nth-child(3n + 4) { clear: left; } </style> </head> <body> <br> <br> <div class="grid"> <a class="grid-item" href = 'linka'> <span> Text A </span> </a> <a class="grid-item" href = 'linkb'> <span> Text B </span> </a> <div class="grid-item" > <span> Company Logo </span> </div> <a class="grid-item" href = 'linkc'> <span> Text C </span> </a> <a class="grid-item" href = 'linkd'> <span> Text D </span> </a> </div> </body> </html>
解決方案3
0 2022-07-15 15:56:42
您可以將圓圈設置為position: relative; 和要position: absolute; top: 0; bottom: 0; position: absolute; top: 0; bottom: 0;
CSS：如何在div中垂直居中對齊文本？ （或任何其他非表格的元素）
[英]CSS : How do I vertically-center align text in a div ? (or any other elements which is not a table)
在CSS中，如何在較大的圓圈內制作圓圈，並在所有圓圈的中心內制作文字？
[英]How do I make circles within a larger circle, and text within the center of all the circles, in CSS?
如何僅使用 CSS 創建一個圓形或方形 - 中心為空心？
[英]How do I create a circle or square with just CSS - with a hollow center?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.