Align div vertically in the middle

This question already has an answer here:

Vertically centering a div inside another div 23 answers

---

You can achieve this by display: table-cell; Remove float from .name and .info and assign display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle; to them :)

.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/

try this one

.row {
    width: 450px;
    background-color: yellow;
    border: 1px solid blue;
    display:table;
}
.row {
    width: 450px;
    background-color: yellow;
    border: 1px solid blue;
    display:table;
}

assign row display:table; property and its child display:table-cell; and vertical-align:middle; and also remove the float:right; from child

---

Add to your .info:

.info{
//...
    position: absolute;              
    top: 50%;                        
    transform: translate(0, -50%)
}

And your .row should set:

position: relative;

I had updated your jsfiddle

链接地址: http://www.djcxy.com/p/75872.html

上一篇: 父母div高度未定义时，在另一个div中居中

下一篇: 在中间垂直对齐div