li
中的ul
标记不是从顶部开始的。相反,它从底部开始。
我希望所有图像从顶部开始,这些图像的所有标签应该在图像下方10px处开始。
重要事项:图片和文字应在li中居中对齐。
即使标签较大,最终输出应该类似于下图:
非常感谢任何帮助。
代码在此处:https://jsfiddle.net/srshah23/suctrnuq/
.cul {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0px auto 0;
}
.cli {
display: inline-block;
width: 10%;
padding: 0px 25px 0;
background-size: 46px;
}
.cli .img {
background: url("https://www.gravatar.com/avatar/3906f6fa3d7c00158d98abe7540054c8/?default=&s=64") no-repeat;
width: 46px;
height: 46px;
margin: 0 auto;
}
<div>
<ul class="cul">
<li class="cli">
<div class="img"></div>
<div>PRETTY LONG TEXT ABCDEFG</div>
</li>
<li class="cli">
<div class="img"></div>
<div>TEXTUAL PLANNING</div>
</li>
<li class="cli">
<div class="img"></div>
<div>PRETTY TEXT</div>
</li>
<li class="cli">
<div class="img"></div>
<div>RANDOM TEXT ABC</div>
</li>
<li class="cli">
<div class="img"></div>
<div>MEDIUM TEXT</div>
</li>
</ul>
</div>
答案 0 :(得分:1)
要进行对齐,请将vertical-align: top
和text-align: center
添加到li.cli
。
对于图片与文字之间的边距,请在margin: 0 auto
中将margin: 0 auto 10px
更改为.img
。
其他信息:
您的列表项有display: inline-block
。 vertical-align
属性适用于内联级元素,默认值为baseline
。
您会在代码中注意到(特别是如果您应用边框)每个列表项与容器的基线(demo)对齐。使用vertical-align: top
覆盖默认值。
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
答案 1 :(得分:0)
也许你想要这样的东西。如果没有告诉我,我会改变它 - 我为文本div创建了一个额外的类'txt',我在css上发表评论,这样你就可以很容易地理解我的变化Live Fiddle
.cul {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0 auto;
/* remove the last 0 from here */
}
.cli {
display: inline-table;
/*change this to inline-table */
width: 10%;
padding: 0px 25px 10px;
/*replace last 0 with 10px when window resize And remove the back ground size */
}
.cli .img {
background: url("https://www.gravatar.com/avatar/3906f6fa3d7c00158d98abe7540054c8/?default=&s=64") no-repeat;
width: 46px;
height: 46px;
margin: 0 auto;
}
.txt {
/*add this css for the gap and center text */
text-align: center;
margin-top: 10px;
}
<div>
<ul class="cul">
<li class="cli">
<div class="img"></div>
<div class="txt">PRETTY LONG TEXT ABCDEFG</div>
</li>
<li class="cli">
<div class="img"></div>
<div class="txt">TEXTUAL PLANNING</div>
</li>
<li class="cli">
<div class="img"></div>
<div class="txt">PRETTY TEXT</div>
</li>
<li class="cli">
<div class="img"></div>
<div class="txt">RANDOM TEXT ABC</div>
</li>
<li class="cli">
<div class="img"></div>
<div class="txt">MEDIUM TEXT</div>
</li>
</ul>
</div>