                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

怎么实现单行文本两个span标签垂直居中

<li><span class="index">1</span><span class="text">step1</span></li>

这是单行文本，如果使用height和line-height一样的方法的时候，会出现只有第一个做到了垂直居中，第二个是按照第一个的水平准线来排（图2），而不是根据自己的大小调节水平居中如果想要实现2个都按照自己的大小实现垂直居中（图1），怎么做？

jinphic

2017-02-14

源自：初识HTML(5)+CSS(3)-升级版 15-8

关注问题我要回答

2653

操作

收起

2 回答

慕粉0018423827 回答被采纳 +3 积分
2017-02-14

不太懂你想问什么但是给span加margin肯定能达到你要的效果

0 回复有任何疑惑可以回复我~

收起回答

jinphic 提问者

就是想要垂直居中啊，图一"step 1"不是位于方框的中部吗，但是图二的 "step 1"没有我试过使用margin，但是不行，后来我使用了vertical-align:middle就可以了，但是还是不懂margin为什么实现不了

2017-02-14 回复有任何疑惑可以回复我~

慕粉0018423827 回复 jinphic 提问者

这个问题我得跟你道个歉因为span并不是块级元素而是内联元素也就是行内元素...所以margin对它是无效的如果要用的话可以加个display:inline-block 转换成行内块级元素

2017-02-14 回复有任何疑惑可以回复我~

jinphic 提问者回复慕粉0018423827

谢谢你

2017-02-19 回复有任何疑惑可以回复我~

慕粉3726681
2017-07-27

最优：display:inline-block; + float:left;

次优: display:flex; + flex-flow:row nowrap; + justify-content:center;

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226379 人
解答问题 18241 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

3 回答怎么有两对span标签

2 回答怎么垂直居中求告知

3 回答文字水平垂直居中

6 回答请问该操作为什么能实现垂直居中?

2 回答怎么实现表格中的标题居中

搜索更多本课相关问答

怎么实现单行文本两个span标签垂直居中

我要回答关注问题

热搜

最近搜索清空

怎么实现单行文本两个span标签垂直居中

2 回答

本课相似问答

怎么实现单行文本两个span标签垂直居中