如果没有巨大的线宽，就不能垂直对齐多条线
提问于 2017-05-20 06:57:57
我有一个JS MixItUp，我把它放在文本框中，但是我似乎无法让它在一个框中获得多行，垂直对齐，并保持在元素中。
要垂直对齐，我需要设置直线高度和垂直对齐到中间.
我把线高设置为盒子的大小(45 box )。
在这个这个CodePen中，您可以在下面的框中看到问题--单词就会从盒子里跳出来。
.courses span {
border: 1px solid white;
color: black;
display: grid;
font-size: 11px;
height: 45px;
background: #ffffff;
border: 2px solid #505050;
line-height: 45px;
vertical-align: middle;
margin: 4px 0;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}我还试着跟踪垂直对齐示例CodePen，但是单行将位于框的顶部。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-05-21 09:44:40
css代码中的一些更改。
尝试以下更新的代码：- https://codepen.io/bhuwanb9/pen/zwMJWj
.courses li {
text-align: center;
font-size: 14px;
width: 19%;
margin: 0.5%;
background: #ffffff;
border: 2px solid #505050;
position:relative;
height: 65px;
box-sizing:border-box;
}
.courses span {
color: black;
font-size: 11px;
line-height: normal;
position:absolute;
-webkit-transition: all .4s ease;
transition: all .4s ease;
transform: translateY(-50%);
top:50%;
}Stack Overflow用户
发布于 2017-05-20 08:08:53
使position of the box relative和courses span's position absolute。例如,
box{
position:relative;
display:block;
}
.courses span{
position:absolute;
text-align: center;
}除了代码中的vertical-align属性之外，尝试将这些属性与其他属性一起使用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44087368
复制相关文章
腾讯云开发者
