Skip to content Skip to sidebar Skip to footer

Align List Items To Top Of Ul Container

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

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.

revised fiddle


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: 0px25px10px;
  /*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><ulclass="cul"><liclass="cli"><divclass="img"></div><divclass="txt">PRETTY LONG TEXT ABCDEFG</div></li><liclass="cli"><divclass="img"></div><divclass="txt">TEXTUAL PLANNING</div></li><liclass="cli"><divclass="img"></div><divclass="txt">PRETTY TEXT</div></li><liclass="cli"><divclass="img"></div><divclass="txt">RANDOM TEXT ABC</div></li><liclass="cli"><divclass="img"></div><divclass="txt">MEDIUM TEXT</div></li></ul></div>

Post a Comment for "Align List Items To Top Of Ul Container"