无法对齐导航列表元素的基线是CSS圈

Question

我已经做了一个导出CSS的圆圈作为锚点元素。他们都有不同数量的文本，导致他们溢出了圈子。所以我使用JS解决方案将文本水平对齐到圆的中间。我现在遇到的问题是圆圈基线不相等，这取决于它们中有多少行文字。有没有一个简单的CSS解决方案。或者我将不得不使用JavaScript来计算和修改每个列表项的高度？

的.html

<ul class="list-inline nav-horizontal"> 
    <li role="presentation" class="active"> 
     <a href="#1" data-toggle="tab" class="stylish">#1</a> 
    </li> 
    <li role="presentation"> 
     <a href="#2" data-toggle="tab" class="stylish">#2</a> 
    </li> 
    <li role="presentation"> 
     <a href="#3" data-toggle="tab" class="stylish">#3</a> 
    </li> 
    <li role="presentation"> 
     <a href="#4" data-toggle="tab" class="stylish">#4</a> 
    </li> 
    <li role="presentation"> 
     <a href="#5" data-toggle="tab" class="stylish">#5</a> 
    </li> 
</ul> 

的.css

.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; 
} 

的.js

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

Answer 1

这个怎么样？ http://jsfiddle.net/hd8donbn/3/

.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% 
} 

如果其确定我会解释一切：d

Answer 2

我发现了一个简单的CSS的解决方案。将vertical-align:text-top;添加到.list-inline li类问题解决了问题

Answer 3

好吧，不要在这里粗鲁，但我写了一个自己的标记来迎合您的需求，无视您在问题中给出的内容。希望你觉得它有用：

HTML

<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> 

---

CSS

*{ 
     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; 
    } 

---

和一些小的JS

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