在中间垂直对齐div
这个问题在这里已经有了答案：
你可以通过display: table-cell;来实现display: table-cell; 从.name和.info删除float ，并分配display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle; 给他们 ：）
.row {
display: table;
width: 450px;
background-color: yellow;
border: 1px solid blue;
}
.name {
background-color: red;
display: table-cell;
vertical-align: middle;
}
.delete {
background-color: green;
display: inline;
margin-right: 25px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.info {
display: table-cell;
width: 150px;
vertical-align: middle;
background-color: ccc;
border: 1px solid green;
text-align: right;
}<div class="row">
<div class="name">
<h3>Some long name in here</h3>
</div>
<div class="info">
<div class="delete">X</div>
<div class="price">1000.00</div>
</div>
</div>https://jsfiddle.net/uvo2xdxk/5/
试试这个
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
分配行显示：表格; 财产及其子女展示：表格细胞; 和vertical-align：middle; 并删除float：right; 从孩子
加入你的.info：
.info{
//...
position: absolute;
top: 50%;
transform: translate(0, -50%)
}
你的.row应该设置：
position: relative;
我更新了你的jsfiddle
链接地址: http://www.djcxy.com/p/75871.html