align list items to top of ul container
Solution 1
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
Solution 2
Maybe you you want something like this. If not tell me I will change it - And I create an extra class for the text div name it 'txt' and I have comment out on css so you will easily understand where I have changes 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>
Comments
-
saurabh almost 2 years
The
li
tag in myul
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>
-
miltonbhowmick almost 4 yearsvertical-align: top works for me! My list has been placed to top