将列表项与ul容器的顶部对齐 [英] align list items to top of ul container
问题描述
我的ul
中的li
标记不是从顶部开始的.而是从底部开始.
我希望所有图像均从顶部开始,并且这些图像的所有标签应从图像下方开始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>
对于所需的对齐方式,将vertical-align: top
和text-align: center
添加到li.cli
.
对于图像和文本之间的边距,请在.img
中将margin: 0 auto
更改为margin: 0 auto 10px
.
其他信息:
您的列表项有display: inline-block
. vertical-align
属性适用于内联级元素,默认值为baseline
.
您会在代码中(特别是如果应用边框)注意到每个列表项都与容器的基线对齐(演示).用vertical-align: top
覆盖默认值.
https://developer.mozilla.org/zh- US/docs/Web/CSS/vertical-align
The li
tag in my ul
doesn't start from top. Instead it starts from the bottom.
I want to have all the images starting from top and all the labels of those images should start 10px below images.
Important: images and text should be center-aligned within li.
Final output should be something like below image even when labels are bigger:
Any help is highly appreciated.
Code goes here: 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>
For the alignment you want, add vertical-align: top
and text-align: center
to li.cli
.
For margin between image and text, change margin: 0 auto
to margin: 0 auto 10px
in .img
.
Additional info:
Your list items have display: inline-block
. The vertical-align
property applies to inline-level elements and the default value is baseline
.
You'll notice in your code (especially if you apply a border) that each list item is aligned to the baseline of the container (demo). Override the default with vertical-align: top
.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
这篇关于将列表项与ul容器的顶部对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!