具有对齐的fontawesome图标的多行listitem
史密斯
我<li>在Twitter引导程序中为每个列表项制作了带有标签和不同FontAwesome图标的项目列表。我试图垂直放置列表测试中心，但是不能这样
<ul class="middle">
<li>
<a href="#">
<i class="icon-cog icon-2x"></i>
very long multiline item one</a>
</li>
<li>
<a href="#">
<i class="icon-pencil icon-2x"></i>
very long multiline item two
</a>
</li>
</ul>
哪个产生了
这就是我想要实现的
我怎样才能做到这一点？
圣
这是您在看的
http://jsbin.com/iFaWoYa/1/
ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}
<ul class="middle">
<li>
<i class="icon-cog icon-2x"></i> <a href="#">very long multiline item one</a>
</li>
<li>
<i class="icon-pencil icon-2x"></i> <a href="#">very long multiline item two</a>
</li>
</ul>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
具有对齐的fontawesome图标的多行listitem
- 2
带有 FontAwesome 图标的中心文本
- 3
带有左图标的按钮和文本完美对齐
- 4
在FontAwesome图标旁边对齐文本
- 5
更改FontAwesome图标的字体粗细？
- 6
从FontAwesome更改图标的颜色？
- 7
更改FontAwesome图标的字体粗细？
- 8
更改 FontAwesome 跨度图标的悬停颜色
- 9
具有图标标记插件的Highcharts无法呈现FontAwesome点
- 10
带有左栏图标和右对齐图标的移动NavBar引导程序
- 11
带有FontAwesome图标的PrimeFaces SelectOneMenu（自定义f：selectItems）
- 12
在带有Nativescript-Vue的v-for中使用fontawesome图标的问题
- 13
将文本对齐到图标的中心
- 14
div内图标的垂直对齐
- 15
文字和图标的垂直对齐
- 16
div内图标的垂直对齐
- 17
在Bootstrap中将字体对齐在FontAwesome图标旁边
- 18
轮廓不对齐的FontAwesome 5图标
- 19
有没有更有效的方法来编写包含FontAwesome图标的功能？
- 20
如何将带有字体超赞5图标的文本对齐？
- 21
带有垂直对齐图标的自举列表内联
- 22
如何在Appbar上使图标具有不同的对齐方式？
- 23
CSS - 将 FontAwesome 图标与文本输入中的图标对齐
- 24
供选择的FontAwesome图标的完整列表
- 25
在整个项目中调整fontawesome图标的大小
- 26
带连字符图标的WPF和FontAwesome问题
- 27
具有不同图标的相同可执行文件
- 28
如何在谷歌地图上添加具有不同图标的标记？
- 29
具有文本和图标的ListView-使用ListView.Items.Add添加项目，但不会出现图标
我来说两句