垂直对齐问题[重复]

Posted 2023-05-07

【中文标题】垂直对齐问题[重复]

【英文标题】：Vertical alignment issues [duplicate]

【发布时间】：2019-06-25 14:00:25

【问题描述】：

我正在做一个活动列表，我想把它放在中间。但是，它失败了很多次，我试图将vertical-align: middle 几乎无处不在，但仍然无法正常工作。

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

<div id="programlist" class="bounce-in">
  <div12>
      <li1 style="width: 15%;"><img src="images/icon/idea.png" ></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"  ></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>

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

【参考方案1】：

https://codepen.io/crocsx-the-styleful/pen/jdByeq

使用

display: flex;
align-items: center;

在你的身上