I have one div which has three other inline divs. I would like to align these three divs vertically in middle. Spend hours trying to understand why vertical-align: middle; do no work and how to solve the problem. Any suggestion how to solve the problem?
<div id="result-table">
<div class="row-item">
<div class="cell1">do not align vertically at middle</div>
<div class="cell2">this one too</div>
<div class="cell3">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</div>
#result-table {
display: block;
}
.row-item {
display: block;
vertical-align: middle;
width: 100%;
background-color: rgb(245, 245, 245);
border: 1px solid rgb(204, 204, 204);
border-radius: 4px 4px 4px 4px;
margin-bottom: 5px;
}
.cell1 {
display: inline-block;
padding-left: 20px;
width: 150px;
}
.cell2 {
display: inline-block;
width: 150px;
}
.cell3 {
display: inline-block;
width: 150px;
padding-right: 20px;
}
Use these two property with your cells
.cell1
{
display: table-cell;
vertical-align: middle;
// other properties
}
Update: Without display:table-cell
Use vertical-align: middle;
with your cells
.cell2 {
display: inline-block;
vertical-align: middle;
width: 150px;
}
I just came across this what is vertical align? with regard to your question why vertical-align: middle; do no work
The confusion, in my opinion, sets in when people try to use vertical-align on
block level elements and get no results. If you have a small div inside a larger
div and want to vertically center the smaller one within, vertical-align will
not help you. Douglas Heriot has a good roundup of methods on
In The Woods of ways to do this.
You can also check this link if it is useful to solve your issue http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.