如何垂直对齐数字的ol？
如何垂直对齐数字的ol？
提问于 2015-11-11 04:58:17
列表的数字根据li的文本长度移动，导致垂直对齐下降。注意，我有样式数字，正如您在小提琴中看到的那样。
我试着用跨度，但没能用。
CSS
li span {
vertical-align: middle;
display: inline-block;
}HTML
<ol class="rounded-list center_ol">
<li class="cool_white"><a href=""><span>Yannis Drogitis</span></a>
</li>
<li class="cool_white"><a href=""><span>Dimitris Mariglis</span></a>
</li>
<li class="cool_white"><a href=""><span>Kots Mariglis</span></a>
</li>
</ol>如何使数字垂直对齐，相对于列表中的其他数字？
不要与这个问题混淆：左对齐同列标题的ol号。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-11-11 18:58:57
在您的评论中，我认为这可能对您有所帮助，但这里有一点比较草率，您需要提到<a>元素的特定宽度，如果您尝试我的解决方案的话。
工作:小提琴
下面是片段：
ol.rounded-list {
counter-reset: li;
/* Initiate a counter */
list-style: none;
/* Remove default numbering */
*list-style: decimal;
/* Keep using default numbering for IE6/7 */
font: 15px'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.rounded-list a {
color: #444;
text-decoration: none;
display:block;
width:125px;
text-align:left;
background:;
margin:0px auto;
}
.rounded-list a:before {
content: counter(li);
counter-increment: li;
position: relative;
left: -1em;
top: 64%;
margin-top: -1.3em;
background: rgba(255, 168, 76, 0.5);
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
.center_ol {
text-align: center;
list-style-position:inside;
width:60%;
margin:0px auto;
border:1px solid red;
}
.cool_white
{
position: relative;
display: block;
padding: .4em;
border-radius: .3em;
transition: all .3s ease-out;
border:1px solid green;
}<h3 class="center_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_ol">
<li class="cool_white"><a>Yannis Drogitis</a>
</li>
<li class="cool_white"><a>Dimitris Mariglis</a>
</li>
<li class="cool_white"><a>Kots Mariglis</a>
</li>
</ol>
Stack Overflow用户
发布于 2015-11-11 05:51:15
似乎是继承了不想要的财产。来自li.cool_white。我从Irshad建议的链接中实现了这些CSS基础。
已更新
我修改了我的旧密码。我没有创建body，而是创建了一个名为.outer的新类，这里的任何元素都是居中的，而任何外部元素都不是。
.center_ol {
text-align: left;
list-style-position:inside;
}
.outer {
text-align:center;
}
.list{
display: inline-block;
text-align: left;
}最新结果
Stack Overflow用户
发布于 2015-11-11 20:13:39
如果您像这样更改您的center_ol规则，则是解决它的另一种方法。
更新您的小提琴在这里
h3.center_ol {
text-align: center;
}
ol.center_ol {
list-style-position:inside;
display: table;
margin: 0 auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33644518
复制相关文章
相似问题
腾讯云开发者
