Html 垂直对齐问题 我正在做一个活动列表，我想把它放在中间。然而，它失败了很多次，我试着把垂直对齐：中间放在几乎所有的地方，但仍然不起作用

我也试着把html本身，而不是我的css文件，我不想使用像填充或边距的东西，因为它会影响很多元素

<div id="programlist" class="bounce-in">
  <div12>
      <li1 style="width: 15%;"><img src="images/icon/idea.png" width="100px"></li1>
        <li1 style="width: 50%;"><h3>ABC EVENT</h3><p>You can xxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxx.</p></li1>
        <li1 style="width: 5%;"><img src="images/time.png" width="50px" height="50px"></li1>
        <li1 style="width: 10%; vertical-align: middle"><p><strong>12/2/2019</strong></p></li1>   
        <li1 style="width: 20%;"><a onclick="window.open('idea/index.html','popUpWindow','height=800,width=1160,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no, status=no');"><buttonclass="button"><span>REGISTER</span></button></a></li1>    
    </div12>
</div>

<style>
  #programlist div12 {
    display:flex;  
    list-style:none;
    height: 130px;
    border-bottom: 1px solid #999;
  }

  #programlist div12:hover {
    background: #eee;
  }


  #programlist h9 {
    font-size: 20px;
    text-transform: uppercase;  
  }

  #programlist li1 img {
    margin: 0 0 0 0;
  }


  #programlist li1 {
    padding: 5px;
    width: 100%;
  }

  #programlist button {
    border-radius: 4px;
    background-color: #00645a;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    padding: 5px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 0px;
  }

  #programlist button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }

  #programlist button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }

  #programlist button:hover span {
    padding-right: 15px;
  }

  #programlist button:hover span:after {
    opacity: 1;
    right: 0;
  }
</style>

ABC事件您可以XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

2019年12月2日

登记
#节目表第12组{
显示器：flex；
列表样式：无；
高度：130像素；
边框底部：1px实心#999；
}
#程序列表第12部分：悬停{
背景：#eee；
}
#节目表h9{
字体大小：20px；
文本转换：大写；
}
#程序列表li1 img{
保证金：0；
}
#程序列表li1{
填充物：5px；
宽度：100%；
}
#程序列表按钮{
边界半径：4px；
背景色：#00645a；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字体大小：20px；
填充物：5px；
宽度：200px；
过渡：均为0.5s；
光标：指针；
边际：0px；
}
#程序列表按钮范围{
光标：指针；
显示：内联块；
位置：相对位置；
过渡：0.5s；
}
#程序列表按钮范围：之后{
内容：'\00bb'；
位置：绝对位置；
不透明度：0；
排名：0；
右：-20px；
过渡：0.5s；
}
#程序列表按钮：悬停范围{
右侧填充：15px；
}
#程序列表按钮：悬停范围：之后{
不透明度：1；
右：0；
}

如何使列表垂直居中对齐？

使用

在您的li上

使用

你的李

display: flex;
align-items: center;