Question

我这里有一个jsfiddle - https://jsfiddle.net/hjq6ay60/12/

超级简单，我总是忘记怎么做。

我左边有文字，右边有一个按钮。

我只需要将它们垂直居中 - 我相信你可以通过在文本中添加填充来实现这一点。

.block{
    border: 1px solid red;
    padding: 10px;
    width: 400px;

    &-top{
        display: inline-block;
        float: left;
        vertical-align: middle;
    }

    &-bottom{
        float: right;
         vertical-align: middle;
        &__button{
            border: 1px solid grey;  
            height: 50px;
            width: 50px;
        }
    }
}

Answer 1

为什么不使用display:table和display:table-cell？见here

.block {
   display:table;
}
.block-bottom,.block-top {
   display table-cell;
   vertical-align: middle;
}
.block-bottom {
   width: 50px;
}

并从float:left

中删除float:right和.block-bottom .block-top

Answer 2

我们可以这样使用position和translateY：

.block {
  border: 1px solid red;
  padding: 10px;
  width: 400px;
  position: relative;               // Add here
  &-top {
    position: absolute;             // Add here
    top: 50%;                       // Add here
    left: 5px;                      // Add here
    right: 65px;                    // Add here
    transform: translateY(-50%);    // Add here
    p {
      margin: 0;
    }
  }
}

预览

一行：https://jsfiddle.net/xpgszmvn/
多行：https://jsfiddle.net/zqxvwv8L/

Answer 3

Flexbox可以免费为您完成。另外，你可以获得摆脱花车的额外好处。

<强> Example Here

.block{
    border: 1px solid red;
    padding: 10px;
    width: 400px;
    display: flex;
    align-items: center; /* Magic! */

    &-top{
      flex: 1; /* Stretch this item all the way */
               /* By default, items take only as much as they need */
    }

    &-bottom{
        /* No need for floats or display: */
        &__button{
            border: 1px solid grey;  
            height: 50px;
            width: 50px;
        }
    }
}

Answer 4

以相等的值使用height和line-height，例如

button{
  height:30px;
  line-height:30px;
  text-align:center;
}

始终文字将位于中心

对于两行文字

 button{
   width:50px;
   height:auto;
   padding:10px;
}

这将创建高度取决于文本的按钮

Answer 5

试试这个，肯定会为你工作。

.block {
    display: table
}

.block-top {
    display: table-cell;
    vertical-align: middle;
}

.block-bottom {
    display: table-cell;
    width: 50px;
    vertical-align: middle;
}

CSS - 垂直对齐文本和按钮

5 个答案: