Issue
I need an advice how to center text on line vertically. I have basically a data grid that can have rows and cells and within the cell you can put text on multiple lines which have fixed height of 34px. So I need to center text on its own line, but not within the row because then if on the same row you had one cell which has 2 line and the other has just one line the latter one would be centered in the middle of 64px.
.container {
width: 100%;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.text {
height: 34px;
border: 1px solid red
}
.cell {
padding: 3px;
border: 1px solid black;
}
.line1 {
display: flex;
width: 100%;
}<div class="container">
<div class="line1">
<div class="cell">
<div class="text">
Text 1
</div>
<div class="text">
Text 2
</div>
</div>
<div class="cell">
<div class="text">
Text 2
</div>
</div>
</div>
</div>https://jsfiddle.net/ve4qauz0/34/
Solution
You can give height of the containing div to the line-height and it should work as you expect.
In your case to .text add line-height: 34px;
.container {
width: 100%;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.text {
height: 34px;
border: 1px solid red;
line-height: 34px;
}
.cell {
padding: 3px;
border: 1px solid black;
}
.line1 {
display: flex;
width: 100%;
}<div class="container">
<div class="line1">
<div class="cell">
<div class="text">
Text 1
</div>
<div class="text">
Text 2
</div>
</div>
<div class="cell">
<div class="text">
Text 2
</div>
</div>
</div>
</div>Answered By – Abhishek Kokate
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0