程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

无论大写还是小写,各个字母在视觉上均居中

发布于2023-11-18 07:47     阅读(1086)     评论(0)     点赞(10)     收藏(4)


所以我需要制作每个圆圈中都有一个字母的圆圈,并且我希望将字母居中。然而,当我使用不同大小的字母时,它们居中的方式有​​所不同,在本例中是小写q大写 A(只是一个例子,它可以是任何字母):

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 看起来不正确居中。

这是一张图片来证明我的意思,左边是我得到的,右边是我想要的:

q 应该稍高一些,以使其看起来正确居中。是否可以在不更改每个具有不同大小的字母的 CSS 的情况下做到这一点?


解决方案


一个 JavaScript 解决方案。我将小写字母分为三种不同的类型:标准小写字母、线下字母和高字母。我使用 ASCII 代码来定位它们,并添加 CSS 类并进行margin-top相应的更改。您可以相应地添加更多例外(字母 j 可能需要向下一个像素。)

这是一支笔。

$('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>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/532556/34d45404a2133c78ad62/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

10 0
收藏该文
已收藏

评论内容:(最多支持255个字符)