html - 垂直对齐问题
问题描述
我正在做一个活动列表,我想把它放在中间。但是,它失败了很多次,我几乎试图把它放在vertical-align: middle
任何地方,但仍然无法正常工作。
我也尝试放入 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>
如何使我的列表垂直居中对齐?
解决方案
推荐阅读
- java - 如何获取已部署 App Engine 项目的 URL
- sql - 在 SQL 查询中需要帮助 - 日期
- php - 输出一些 HTML 后的 PHP 刷新页面(将操作分成块)
- c++ - 添加 QGraphicsView 偏移 QTouchPositions
- javascript - addEventListener 不适用于默认参数
- acumatica - Acumatica API 获取图像
- javascript - javascript async 函数可以从获取中返回一个供全局使用的数组吗?
- php - 使用 docker 创建容器时 DocumentRoot 不存在
- javascript - 如果没有 d3 中的缩放事件,我的矩形没有很好的坐标
- sql-server - 在 SQL Server 中将 XML 列转换为行