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;实现这一目标从float和.name移除.info并将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;财产及其子显示：table-cell;和vertical-align：middle;并删除浮动：右;来自孩子

Answer 3

您可以查看以下链接。

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

{{1}}

Answer 4

添加到.info：

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

你的.row应该设置：

position: relative;

我更新了您的jsfiddle

Answer 5

我修改了你的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%;
}

请检查它是否适合您。

在中间垂直对齐div

5 个答案: