Html 旋转前后将文本居中于圆圈中

我发现了这个，觉得很酷。问题是，无论文本旋转之前还是之后，我似乎都无法将其居中放置在圆圈中。当前的颜色并不重要，因为我更改它们只是为了在修改代码时能够看到差异。我为CSS代码的长度提前道歉。如果有人知道如何把它缩短，可以说我洗耳恭听。我也希望在旋转后能有“clickable”这个词，但我也还没有弄清楚这个词

HTML

<ul class="ca-menu">
    <li>
        <a href="#">
            <span class="ca-icon">Home Page</span>
            <div class="ca-content">
                <h2 class="ca-main"></h2>
                <h3 class="ca-sub"></h3>
            </div>
        </a>
    </li>
    ...
</ul>

---

一个简单的修复方法是调整单词

的
行高度
，
ca图标
，以匹配父级
。ca菜单li
，其高度为
200px

.ca-icon{
    ...
    line-height: 200px;
    ...
}

查看此更改的作用。
->当您在spin中输入比设计更改大的文本时，请检查它

->请附上我的以下代码，并检查和输入大文本不改变设计

->与您的代码相同，但我对css进行了一些更改


.ca菜单li{
宽度：200px；
高度：200px；
/*圆圈大小*/
边框：10px实心#E8FF02；
/*旋转前的边框颜色*/
溢出：隐藏；
位置：相对位置；
浮动：左；
背景：#005B8E；
/*旋转前的背景*/
右边距：10px；
盒影：5px 5px 2px rgba（0,0,0.2）；
边界半径：125px；
/*圆与方*/
过渡：所有400ms线性；
显示：表格；
}
.ca菜单李：最后一个孩子{
边缘底部：0px；
}
.ca菜单李a{
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
宽度：100%；
身高：100%；
颜色：#BEFC00；
/*旋转前的文本颜色*/
位置：相对位置；
}
.ca图标{
字体系列：“WebSymbolsRegular”，草书；
字体大小：20px；
文本阴影：0px 0px 10px#101254；
线高：27px；
宽度：50px；
左：20px；
文本对齐：居中；
过渡：所有900ms线性；
}
.钙含量{
位置：绝对位置；
左：120px；
宽度：370px；
高度：60px；
顶部：20px；
}
.ca main{
字体大小：15px；
颜色：#000；
过渡：所有300ms线性；
}
.ca分公司{
字体大小：14px；
颜色：#000；
过渡：所有300ms线性；
}
.ca菜单li：悬停{
背景#930016；
边框颜色：#2BF802；
变换：旋转（360度）；
/*旋转后的颜色*/
}
.ca菜单li：悬停.ca图标{
颜色：#0100B3；
字体大小：20px；
/*旋转后的文本大小*/
}
.ca菜单li:hover.ca main{
显示：无；
}
.ca菜单li:hover.ca子菜单{
不透明度：8.0；
}
.ca菜单{
填充：100；
保证金：100像素自动；
宽度：250px；
/*从顶部旋转位置*/
}

堆栈



...

OMG！这么简单，但这么难，至少对我来说。我很高兴这里有很多人比我聪明得多。我一直在看填充、文本等。谢谢！！！
.ca-icon{
    ...
    line-height: 200px;
    ...
}