问题描述
所以我需要制作圆圈,每个圆圈中都有一个字母,我希望将字母居中.然而,当我使用不同大小的字母时,它们的居中方式有所不同,在这种情况下,小写 q 和 大写 A(只是一个例子,它可能是任何字母):
So I need to make circles that each have a single letter in them and I'm looking to center the letters. There is however a difference in how they get centered when I use letters with different sizes, in this case the lowercase q and the capital A (just an example, it could be any letter):
span {
align-items: center;
display: flex;
font-family: sans-serif;
justify-content: center;
border-radius: 50%;
height: 30px;
width: 30px;
border: 1px solid black;
float: left;
}
<span>q</span>
<span>A</span>
你可以看到小写的 q 比大写的 A 小,这是因为字母有不同的大小,而且 q 没有填满上半部分.这会导致字母 q 看起来不正确居中.
You can see the lowecase q being lower than the uppercase A, which is because the letters have different sizes and the q doesn't fill the upper part. This causes the letter q to not look centered correctly.
这是一张图片来证明我的意思,左是我得到的,右是我想要的:
Here's an image to demontrate what I mean, left being what I got, right being what I want:
q 应该高一点,以使其看起来正确居中.是否可以在不更改每个不同大小字母的 CSS 的情况下执行此操作?
The q should be a bit higher in order to make it look centered correctly.Is it possible to do this without changing the CSS for every individual letter with a different size?
推荐答案
一个 javascript 解决方案.我将小写字母分解为三种不同的类型:标准小写字母、线下字母和大字母.我使用 ASCII 代码定位它们并添加 CSS 类并相应地更改 margin-top
.您可以相应地添加更多例外(字母 j 可能需要降低一个像素.)
A javascript solution. I've broken down the lowercase letters in to three different types: standard lowercase, below the line, and tall letters. I'm targeting them using ASCII codes and adding CSS classes and changing margin-top
accordingly. You could add in some more exceptions accordingly (the letter j might need to come down a pixel.)
$('span').each(function(){
var letter = $(this).text();
var letterCode = letter.charCodeAt(0);
//check if lowercase
if (letter == letter.toLowerCase()){
$(this).addClass('lowercase');
}
if (letterCode == 106 || letterCode == 112 || letterCode == 113 || letterCode == 121 || letterCode == 103 ){ //jpqyg
$(this).addClass('below-line');
}
//All these other letters : bdfiklt
if(letterCode == 98 || letterCode == 100 || letterCode == 102 || letterCode == 105 || letterCode == 107 || letterCode == 108 || letterCode == 116){
$(this).addClass('tall-letters');
}
});
div {
align-items: center;
display: flex;
font-family: sans-serif;
justify-content: center;
border-radius: 50%;
height: 30px;
width: 30px;
border: 1px solid black;
float: left;
}
span{
margin-top: 0;
}
.lowercase{
margin-top: -3px;
}
.below-line{
margin-top: -6px;
}
.tall-letters{
margin-top: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>A</span></div>
<div><span>a</span></div>
<div><span>B</span></div>
<div><span>b</span></div>
<div><span>C</span></div>
<div><span>c</span></div>
<div><span>D</span></div>
<div><span>d</span></div>
<div><span>E</span></div>
<div><span>e</span></div>
<div><span>F</span></div>
<div><span>f</span></div>
<div><span>G</span></div>
<div><span>g</span></div>
<div><span>H</span></div>
<div><span>h</span></div>
<div><span>I</span></div>
<div><span>i</span></div>
<div><span>J</span></div>
<div><span>j</span></div>
<div><span>K</span></div>
<div><span>k</span></div>
<div><span>L</span></div>
<div><span>l</span></div>
<div><span>M</span></div>
<div><span>m</span></div>
<div><span>N</span></div>
<div><span>n</span></div>
<div><span>O</span></div>
<div><span>o</span></div>
<div><span>P</span></div>
<div><span>p</span></div>
<div><span>Q</span></div>
<div><span>q</span></div>
<div><span>R</span></div>
<div><span>r</span></div>
<div><span>S</span></div>
<div><span>s</span></div>
<div><span>T</span></div>
<div><span>t</span></div>
<div><span>U</span></div>
<div><span>u</span></div>
<div><span>T</span></div>
<div><span>t</span></div>
<div><span>U</span></div>
<div><span>u</span></div>
<div><span>V</span></div>
<div><span>v</span></div>
<div><span>W</span></div>
<div><span>w</span></div>
<div><span>X</span></div>
<div><span>x</span></div>
<div><span>Y</span></div>
<div><span>y</span></div>
<div><span>Z</span></div>
<div><span>z</span></div>
这篇关于无论是大写还是小写,在视觉上将单个字母居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!