li 中跨度的中心背景图像，文本居中并在底部垂直对齐

发布于 2024-12-09 21:10:23 字数 418 浏览 0 评论 0原文

Made with table

我想仅使用 CSS 而不是表格来重新创建它，

代码将类似于以下

<ul>
<li>
<span class="icon-class icon-name"></span>
<span class="text">Text</span>
</li>
 //more li's
</ul>

图标类设置图像、显示块、宽度和高度，图标名称设置位置 li float left, list-style none

我所有的 CSS 都很好，除了中心对齐图标；并将文本垂直对齐到底部并居中对齐文本

原文

Made with table

I want to recreate this using CSS only instead of a table

code will be something similiar to the following

<ul>
<li>
<span class="icon-class icon-name"></span>
<span class="text">Text</span>
</li>
 //more li's
</ul>

icon-class sets image, display block, width and height, and icon-name sets position
li float left, list-style none

All of my CSS is fine except center aligning the icon; and vertically aligning text to the bottom and center aligning the text

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

够运 2024-12-16 21:10:23

你可以这样做：

HTML

<div id="wrapper">
    <ul>
        <li><div class="icon"></div> Really long text 1</li>
        <li><div class="icon"></div> Text 2</li>
    </ul>
</div>

CSS

ul { text-align: center; }
li { display: inline-block; }
#wrapper { position: absolute; }
.icon { position: relative; width: 50px; height: 50px; border: 1px solid #aaa; margin: 0 auto;}

演示： http://jsfiddle.net/efqy7

编辑1：添加边距0自动：http://jsfiddle.net/efqy7/3

编辑 2： 添加包装器和位置绝对/相对：http://jsfiddle.net/efqy7/7

You can do just :

HTML

<div id="wrapper">
    <ul>
        <li><div class="icon"></div> Really long text 1</li>
        <li><div class="icon"></div> Text 2</li>
    </ul>
</div>

CSS

ul { text-align: center; }
li { display: inline-block; }
#wrapper { position: absolute; }
.icon { position: relative; width: 50px; height: 50px; border: 1px solid #aaa; margin: 0 auto;}

Demo : http://jsfiddle.net/efqy7

Edit 1 : add margin 0 auto : http://jsfiddle.net/efqy7/3

EDIT 2 : add wrapper and position absolute/relative : http://jsfiddle.net/efqy7/7

回复收藏 0 原文