垂直对齐单行区块内的图片和文本

垂直对齐单行区块内的图片和文本

DOM结构

<div class="prj-item"><a href="#"><img src="img/icon_4.png" height="40" alt=""> <span>竞足单关</span><p class="small">曼联vs皇家马德里队</p> </a></div>

prj-item 作为图片和文本容器

CSS

.prj-item { padding-left: 50px; }
.prj-item img{ position: absolute; left: 15px; height: 40px; }
.prj-item p.small{ color: #8b8b8b; padding-left: 12px; margin-bottom: 0; }

主要是给容器prj-item里面的唯一一个图片img以绝对定位。然后给prj-item padding-left足以容下img,这样span标签的开始位置就不会是容器prj-item的0位置。

有多美?大概就像这样 水平对齐图片和文本

关于本文如您有任何想法和意见,欢迎与我们联系,邮箱地址zhi@uqugu.com
您对本文有什么看法,喜欢或者不喜欢都可以发表意见。