Javascript 无法对齐css圆的导航列表元素的基线

我已经做了一个导航出css绘制的圆圈作为锚元素。它们都有不同数量的文本，导致它们从圆圈中溢出。因此，我使用了JS解决方案将文本水平对齐到圆圈的中间。我现在遇到的问题是，圆圈基线是不相等的，这取决于圆圈中有多少行文本。有没有一个简单的css解决方案。或者我还需要用javascript计算和修改每个列表项的高度吗

.html

.js

$（“a.style”）.contents（）.wrap（“”）；
$（“a.span”）.css({
职位：“相对”，
“top”：函数（）{
返回（$（this.parent（）.height（）-$（this.height（））/2
}
});

这个怎么样

---

如果可以的话，我会解释一切：D

我找到了一个简单的css解决方案。添加

垂直对齐：文本顶部到
的类。列表内联li
解决了这个问题
好吧，恕我直言，我自己写了一个标记来满足您的需要，不管您在问题中给出了什么。希望您觉得它有用：

HTML


还有一些小的js

$('li').click(function(){
    $(this).child('a').click();
});

对如果css可以工作，我对此很满意。我回答说，你不介意给我们发一些链接来查看实时演示并帮助你实现吗？不幸的是，我没有一个实时示例。仅在本地工作如果所有文本都能放在一行中，这就行了。然而，我有一个反应灵敏的设计，屏幕大小改变文本换行到下一行，导致基线发生变化。你想让它们每次都保持在线吗？即使使用滚动条？不。当页面宽度变小时，圆圈将向下移动到下一行。这是一个简单的解决方案。。。添加了
垂直对齐：文本顶部
到
。列出内联li
-。-“下次要更清楚：D…并粘贴所有代码，因为这里似乎没有解决任何问题。
.list-inline {
    display: inline-block;
    padding: 6px; 
}

.stylish {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 8px solid #ED1B24;
    font-size: 20px;
    color: #BBAE92;
    text-align: center;
    text-decoration: none;
    background: none;
    line-height: 1.1em;
}

.stylish:hover, li.active .stylish {
    color: #fff;
    text-decoration: none;
    background: #ED1B24;
}

$("a.stylish").contents().wrap("<span>");
$("a.stylish span").css({
    position : "relative",
    "top" : function() {
        return ($(this).parent().height() - $(this).height()) / 2
    }
});

.nav-horizontal li:before {
    content:'';
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.stylish {
    display: inline-block;
    text-decoration: none;
    color: #ED1B24;
    vertical-align: middle;
    max-width: 90%
}

<ul>
    <li class="active"><a href="#">small</a></li>
    <li><a href="#">medium content</a></li>
    <li><a href="#">a bit larger content</a><`enter code here`/li>
    <li><a href="#">really large hunk of content</a></li>
    <li><a href="#">this is a rrrrreeeeaaaalllllllyyyyy big chunk, with a long word too</a></li>
</ul>

    *{
        margin: 0;
        padding: 0;
    }
    ul {
        display: inline-block;
        list-style: none; /*remove markers for `li`*/
    }

    li {
        border-radius: 50%; /*border-radius 70px;*/
        overflow: hidden; /*hide overflowing text, if any*/
        float: left; /*puts things in line, with their tops aligned. */
        /*If `display:inline-block` is used, it will match the bottoms at same level. try it*/

        border: 8px solid #ED1B24;
        display: block;
        height: 140px;
        text-align: center;
        width: 140px;
    }
    li a{
        padding: 0 5px; /*prevent border cutting*/
        word-wrap: break-word; /*breaks long words*/
        text-decoration: none;
        color: #BBAE92;

        /*the next 4 allow a child to be centered vertically*/
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);

    }
    li.active,
    li:hover{
        cursor: pointer; /*makes it look like a link*/
        background: #ED1B24;
    }
    li.active a,
    li:hover a{
        color: #fff;
    }

$('li').click(function(){
    $(this).child('a').click();
});