CODEWITHSUNDEEP
htmlcss
Mika
Mika

Reputation: 335

How to Vertical align elements of a list?

I have a ul where one of its children is positioned on the left side (vertically centered with absolute position), but the rest of the items have to be vertically aligned as well but displayed as a column.

The left li is all right, I just can't find a way to vertically align a list of elements

I've created a fiddle where I show how this works currently

#outer {
  position: relative;
  height: 100vh;
}

.notAligned {
    position: absolute;
    left: 10%;
    top: 50%;
    top: calc(50% - 25px);
    transform: translateY(-50%);
    width: 35%; } 

.inner {
  margin-left: 50% !important;
  width: 50%;
  position: static;
}




/* Structure */
#outer {
  border: 1px solid green;
  padding: 20px;
  background: #f443363b;
}

.inner {
  border: 1px solid red;
  height: 3em;
  margin: 5px 0;}
<ul id="outer">
  <li class="notAligned">Not Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
</ul>

Upvotes: 0

Views: 115

Answers (2)

Zuber
Zuber

Reputation: 3483

You can achieve this with the use of css-grid. you can avoid the use of position: absolute and margin. i have removed unwanted css to keep it minimal.

#outer {
  border: 1px solid green;
  padding: 20px;
  background: #f443363b;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  list-style: none;
  position: relative;
  min-height: 100vh;
}

.notAligned {
  grid-row: span 5;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  grid-column: span 2;} 

/* Structure */
.inner {
  border: 1px solid red;
  height: 3em;
  margin: 5px 0;
  grid-column: span 3;
}
<ul id="outer">
  <li class="notAligned">Not Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
</ul>

Upvotes: 0

James
James

Reputation: 631

Possible with the use of flexbox

http://jsfiddle.net/zvaqhs40/

#outer {
  position: relative;
  height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.notAligned {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 35%;
}

.inner {
  margin-left: 50% !important;
  width: 50%;
  position: static;
}

/* Structure */
#outer {
  border: 1px solid green;
  padding: 20px;
  background: #f443363b;
}

.inner {
  border: 1px solid red;
  height: 3em;
  margin: 5px 0;
}

ol, ul, li {
    list-style: none;
}
<ul id="outer">
  <li class="notAligned">Not Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
  <li class="inner">Aligned</li>
</ul>

Upvotes: 1

Related Questions