CODEWITHSUNDEEP
css
George B.
George B.

Reputation: 312

ul li - how to center li when ul height is 100%

I need LI in UL middle and center

ul {
  width:100%;
  height:100%;
  text-align: center;
  position: absolute;
  top: 0;
  background: red;
}
li {

}

http://jsfiddle.net/3Ezx2/1629/

Thank you

Upvotes: 0

Views: 971

Answers (4)

Ehsan
Ehsan

Reputation: 12959

Supported in: Chrome,Firefox,IE8+,Opera,Safari

div {
    width:100%;
    height:100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background: red;
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 0;
    list-style: none;
}
<div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
</div>

Upvotes: 0

Marcus Pitz
Marcus Pitz

Reputation: 11

Try it: http://jsfiddle.net/3Ezx2/1635/

div {
  background: green;
  position: absolute; 
  width:100%;
  height:100%;
}
ul {  
 position: absolute;  
 width:100%;
  height:100%;
  text-align: center;
 top: 50%;
}
   <div id="background">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
</div>

One div to background and top: 50% property.

Hope that it help you.

Upvotes: 0

Ivar
Ivar

Reputation: 4901

One of the options is to use flexbox:

// here extending your original css proposal

ul {
  width:100%;
  height:100%;
  text-align: center;
  position: absolute;
  top: 0;
  background: red;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
li {
  background-color: white;
  border: 1px solid;
}

JSfiddle - http://jsfiddle.net/37eekc8n/

Upvotes: 2

Marco Hengstenberg
Marco Hengstenberg

Reputation: 864

ul {
  width:100%;
  height:100vh;
  text-align: center;
  background: red;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

That's all the CSS you need to vertically center your list-items. See the updated fiddle: http://jsfiddle.net/3Ezx2/1633/

Upvotes: 3

Related Questions