seo Question posted in
Some basic information to get you started with this can be found here.

How to vertically justify elements in a container without flexbox? – SEO

I have a ul element of height 270px. There are 10 li elements inside it. I want all the li elements to be vertically justified — i.e. the top and bottom li elements must touch the top and bottom of the container respectively and the remaining elements should adjust their spacing. I have no issues with display type of any element. ‘li’ elements can be inline, inline-block or block level. Following is the code: 

* { margin: 0; padding: 0; }
ul {
  height: 270px;
  width: 250px;
  color: #afafaf;
  border: 1px dotted red;
}
li {
  width: 240px;
}
<ul>
  <li>- Web/UI Design</li>
  <li>- Web Development</li>
  <li>- CMS Integerations(WP, Joomla)</li>
  <li>- Logo & Banner Design</li>
  <li>- PSD to XHTML, CSS 3.0, HTML5</li>
  <li>- PHP & MySQL</li>
  <li>- jQuery, Ajax, Flash(ActionScript)</li>
  <li>- Landing Page Design & SEO</li>
  <li>- SEO(Search Engine Optimization)</li>
  <li>- E-Commerce & Shopping Cart</li>

</ul>

Not ot mention that I have gone throught various posts explaining how to vertically align elements. I want them to be justified. I know it can be done with display: flexbox, but I want to target older browsers too which do not support flexbox.

Tags:

2

Answers


  1. 0

    Just add “line-height: 1.7;” to your li. It will be done.
    As you can see below 

    * { margin: 0; padding: 0; }
ul {
  height: 270px;
  width: 250px;
  color: #afafaf;
  border: 1px dotted red;
}
li {
  width: 240px;
    line-height: 1.7;
}
    <ul>
  <li>- Web/UI Design</li>
  <li>- Web Development</li>
  <li>- CMS Integerations(WP, Joomla)</li>
  <li>- Logo & Banner Design</li>
  <li>- PSD to XHTML, CSS 3.0, HTML5</li>
  <li>- PHP & MySQL</li>
  <li>- jQuery, Ajax, Flash(ActionScript)</li>
  <li>- Landing Page Design & SEO</li>
  <li>- SEO(Search Engine Optimization)</li>
  <li>- E-Commerce & Shopping Cart</li>

</ul>
    Login or Signup to reply.
  2. 0

    This appears to do what you’re asking:

    * { margin: 0; padding: 0; }
ul {
  height: 270px;
  width: 250px;
  color: #afafaf;
  border: 1px dotted red;
  display: table;
}
li {
  width: 240px;
  display: table-row;
}
    <ul>
  <li>- Web/UI Design</li>
  <li>- Web Development</li>
  <li>- CMS Integerations(WP, Joomla)</li>
  <li>- Logo & Banner Design</li>
  <li>- PSD to XHTML, CSS 3.0, HTML5</li>
  <li>- PHP & MySQL</li>
  <li>- jQuery, Ajax, Flash(ActionScript)</li>
  <li>- Landing Page Design & SEO</li>
  <li>- SEO(Search Engine Optimization)</li>
  <li>- E-Commerce & Shopping Cart</li>

</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search