<分区>
<分区>
我需要在卡片设计的图像后对齐垂直文本。一切都很好，除了文字，我需要文字垂直对齐，因为有些卡片的文字很少或很多(3 或 4 行)
.cardscurso {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
display: inline-block;
width: 230px;
max-width: 240px;
height: 250px;
max-height: 230px;
min-height: 230px;
background-color: #fff;
border-radius: 5px;
border-bottom: 22px solid #1EA4D3;
color: #4E4E4E;
margin-right: 0.2em;
margin-left: 0.2em;
margin-bottom: 3.2em;
position: relative;
font-family: roboto;
font-size: 0.9em;
line-height: 1.2944em;
text-align: center !important;
text-decoration: none;
}
.cardscurso a {
text-decoration: none;
color: #4E4E4E;
}
.cardscurso:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.cardscurso img {
border-radius: 5px 5px 0 0;
width: 100%;
height: auto;
background-position: center;
overflow: hidden;
border-radius: 5px 5px 0 0;
height: 128px;
width: 100;
height: auto;
border-bottom: 3px solid #1EA4D3;
}
.textin {
position: relative;
clear: both;
}
.textin p {
position: absolute;
top: 50%;
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
-o-transform: translateY(20%);
transform: translateY(20%);
margin: 0;
padding: 0 1.4em;
vertical-align: middle;
}<div class="cardscurso">
<a href="seguridad-industrial/curso-de-montacargas.html">
<img src="imagenes/ventas/entrenamiento-para-vendedores.png" alt="Entrenamiento para vendedores" />
<div class="textin">
<p>Entrenamiento para vendedores</p>
</div>
</a>
</div>文本未垂直对齐，使用该代码文本与父级对齐，请检查我的代码并提供正确的代码，谢谢!!!
最佳答案
你需要改变<p>标记而不是必须添加 <span>因为vertical-align: middle;不适用于 block 元素，CSS 应该是
.textin{
line-height: 60px;
}
.textin span{
display: inline-block;
vertical-align: middle;
line-height: 1em;
}
这是链接 https://jsfiddle.net/z306mrj4/8/ 希望这对你有帮助
关于html - 将卡片上的垂直文本与图像对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57188089/