- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
所以我需要制作圆圈,每个圆圈中都有一个字母,我希望将字母居中。然而,当我使用不同大小的字母时,它们居中的方式有所不同,在这种情况下,小写 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
。您可以相应地添加更多异常(exception)(字母 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>
关于html - 无论是大写字母还是小写字母,都可以在视觉上将单个字母居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51190682/
我遇到了一个小问题。我想利用字符串中的双字母。我设法编译了一个程序,但没有成功。 #include #include #include std::string::iterator functio
我想让我在文本字段中写的所有内容都是大写字母。在我写作时,而不是在失去焦点之后。 我如何使用 jQuery 做到这一点? 最佳答案 我会为此使用 CSS。 只需将 text-transform: up
<% '****************************** '函数:gen_key(digits)&nb
我有一个表单,我希望用户只输入字母、数字 我想限制他们 使用数字作为第一个值 例如。 1abc 使用大写字母1ABc 使用空格1 ab CD d5 我只想要abc1 OR a1bc OR f25fhg
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
恢复MySQL数据库后,我可以保留所有大写字母名称的表。但 View 名称改为小写字母。 我可以更改一些设置以使 View 在恢复数据库后保留大写字母名称吗? 附注我可以在恢复后再次将 View 更改
总的来说,我是 PDO 和 MySQL 的新手。我正在从即将弃用的 MySQL 切换到 PDO,我有一些问题想更好地了解 MySQL 查询的工作原理。 我目前有这个功能,我不明白表格行前的大写U.&M
仅当所有大写字母位于单词中间时,我才需要匹配它们。例如,RegExr 将与字母 E 匹配。 someThings 代表字母 T。如果大写字母从单词的开头开始,则它不应该匹配。 这个正则表达式几乎匹配它
这个问题已经有答案了: What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? (25 个回答)
我需要按字母顺序相应地排列名称。我设法获得了所需的输出。但是,当我用第一个大写字母键入名称时,例如:Peter,输出是不同的。 EG 输入:Peter Paul John Mary EG 输出:第一个
我一直在谷歌上搜索,但没有找到我的问题的答案: 如何使用正则表达式检查字符串是否至少包含以下各项: 大写字母 小写字母 数字 特殊字符:~`!@#$%^&*()-_=+\|[{]};:'",/? 所以
所以我找到了一个适用于数字然后字母的代码,我尝试修改,以便用户在单元格中输入数据需要是 ex:"52TSQ1234512345" 。我知道他们必须输入 ex: "12PQS" (数字和字母是示例,它可
我正在尝试编写代码,以便从字符串(文本)中删除“坏”单词。 如果该词后面有逗号或任何特殊符号,则该词是“坏”的。如果该单词仅包含 a 到 z(小写字母),则该单词并不“坏”。 所以,我想要达到的结果是
Visual Studio 2012 c++ 文档指出 _ReadBarrier和 _WriteBarrier内在函数现在是 deprecated: The _ReadBarrier, _WriteB
在我的站点中,我提供了一个选项来上传带有 .jpg 和 .JPG 扩展名的图像。它们都可以工作,我可以在服务器本身上看到它们。 当我尝试在浏览器中查看带有 .jpg 扩展名的照片时,将它们命名为 na
我刚刚看到这在技术上是可行的,我无法解决的唯一错误是每次测试时打印的最后一个 ASCII 字符,我也在不使用 的情况下进行了测试。姓名 变量,我的意思是在 ASCII 中的任何小写字母减去 32 应该
我得到了这样的序列: (\$ \# \A \( \* \& \9 \8 \7 \Z \f) 我想过滤掉其中的大写 ASCII 字母,如\A 和\Z 我试图在标准库中查找,但没有运气。 有谁能够帮助我?
我已经搜索过 SO 和 Google,我发现的大多数示例似乎都没有按预期工作(或者没有结合所有这些元素)。我正在尝试创建一个 Regex 表达式,如果字符串包含 至少 字符串中的以下 anywhere
我需要从 mysql 中选择有关查询字符串的结果。让我们的字符串是:Z 和 z(大写和小写) 数据库的样子: url_id test_char 1 Z 2
到目前为止,我们在任何地方都没有发现关于这种非常奇怪的效果的信息。 有一段时间(不知 Prop 体从什么时候开始),大写字母 S 在 Windows 浏览器中的呈现就像它向右移动了一两个像素一样。 这
我是一名优秀的程序员,十分优秀!