Question

我有一个ul，其中一个子项位于左侧（垂直于绝对位置居中），但是其余项目也必须垂直对齐，但要显示为一列。 / p>

左li没事，我只是找不到垂直对齐元素列表的方法

我创建了一个fiddle，在其中显示了当前的工作原理

#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>

Answer 1

可以使用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>

Answer 2

您可以使用css-grid来实现。您可以避免使用position: absolute和margin。我已删除了不需要的css，以使其保持最小。

#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>

如何垂直对齐列表中的元素？

2 个答案: