在中间垂直对齐 div [重复]

Question

我正在尝试对齐一些 DIV，但未能成功。

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

如何使 .info div 在行内垂直对齐？

Answer 1

您可以通过display: table-cell; 实现此目的 从.name 和.info 中删除float 并将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>

Answer 2

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;
}

分配行显示：表格；属性及其子显示：table-cell；和垂直对齐：中间；并删除浮动：对；来自孩子

Answer 3

添加到您的 .info：

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

你的 .row 应该设置：

position: relative;

我已经更新了你的jsfiddle

Answer 4

我修改了你的css，请查看here

.name {
background-color: red;
display: inline;
float: left;
}

.delete {
background-color: green;
display: inline;
 margin-right: 25px;
}

.price {
background-color: blue;
display: inline;
margin-right: 5px;
}

.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
height: auto;
vertical-align: middle;
overflow:hidden;
position:relative;
}

.info {
float: right;
display: inline-block;
background-color: ccc;
border: 1px solid green;
vertical-align: middle;
position:absolute;
right:0;
transform:translateY(-50%)   ;
top:50%;
}

请检查它是否适合您。

Answer 5

您可以通过以下链接查看。

https://jsfiddle.net/uvo2xdxk/7/

      .name {
    background-color: red;
    display: inline;
    float: left;
}

.delete {
    background-color: green;
    display: inline;
     margin-right: 0px;
}

.price {
    background-color: blue;
    display: inline;
    margin-right: 5px;
}

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

.info {


    height:57px;
    display: table-cell;
    vertical-align:middle;
    background-color: ccc;
    border: 1px solid green;
    top: 25%;
}