I have a JS MixItUp, and I have it in text boxes, but I can't seem to get it to get multiple lines in a box, vertically aligned, and stay within the element.
To vertically align, I need to set the line-height and set vertical-align to middle.
I set the line-height to the size of the box (45px).
In this this CodePen, you can see the problem on the bottom boxes - the words go right out of the box.
.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;
}
I also tried following a vertical alignment example CodePen, but the single line would be at the top of the box.
Some changes in css code.
Try this updated codepen:- 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%;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments