垂直对齐具有不同高度的子元素[重复]答案

【问题标题】：Vertical align the child elements with different height [duplicate]垂直对齐具有不同高度的子元素[重复]
【发布时间】：2020-02-18 19:26:45
【问题描述】：

我正在尝试实现具有不同高度的垂直对齐的子元素。

以下是我想要实现的。目前，我在两个按钮上设置了不同的负上边距。我觉得这可以通过单一的通用裁决以更简洁的方式完成。请分享您的想法。

下面是说明问题的代码：

.container {
  padding: 35px 2px;
  border: 1px solid gray;
}

.title {
  font-size: 18px;
}

.action-button {
  float: right;
  height: 50px;
  width: 100px;

}

.small-screen {
  width: 160px;
  display: inline-block;
}

HTML:

<div class="container">

  <span class="title">
    Card header
  </span>

  <button class="action-button">
    Action
  </button>

</div>

<br/>

<div class="container">

  <span class="title small-screen">
    Card header title here is longer
  </span>

  <button class="action-button">
    Action
  </button>

</div>

链接到JSFiddle

【问题讨论】：

你想让文本和按钮垂直居中对齐吗？
是的，没错@Manikandan2811
@Pratiksha Kale - 回答正确请检查..
你在这个 JSFiddle jsfiddle.net/b4mcgj1s/12有更好的解决方案@

标签： html css

【解决方案1】：

将您的 .container 样式替换为。

height: 120px;
display: flex;
border: 1px solid gray;
align-items: center;
justify-content: space-between;

检查sn-p

.container {
  height: 120px;
  display: flex;
  border: 1px solid gray;
  align-items: center;
  justify-content: space-between;
}

.title {
  font-size: 18px;
}

.action-button {
  float: right;
  height: 50px;
  width: 100px;
}

.small-screen {
  width: 160px;
  display: inline-block;
}

<div class="container">

  <span class="title">
        Card header
      </span>

  <button class="action-button">
        Action
      </button>

</div>

<br />

<div class="container">

  <span class="title small-screen">
        Card header title here is longer
      </span>

  <button class="action-button">
        Action
      </button>

</div>

【讨论】：

哇，感谢您的超快速响应。这正是我一直在寻找的。我有 display flex 但没有其他相关的 CSS。需要研究 flex 的东西。祝你有美好的一天！
我需要等待8分钟才能接受。 :)
哦，所以我的回复很快:)

【解决方案2】：

请将您的 .container 类代码替换为以下代码

   .container {
    border: 1px solid gray;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border: 1px solid gray;
    }

【讨论】：

感谢@Pratiksha，这很有帮助，请继续努力！

【解决方案3】：

您可以使用绝对定位而不是浮动。

将position: relative 行添加到.container 类中，以确保按钮位于该元素内。

然后从 .action-button 类中删除 float 并添加：

margin: 0;
position: absolute;
right: 20px;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);

这里是完整的工作代码 sn-p：

.container {
  padding: 35px 2px;
  border: 1px solid gray;
  
  position: relative;
}

.title {
  font-size: 18px;
}

.action-button {
  height: 50px;
  width: 100px;
  
  margin: 0;
  position: absolute;
  right: 20px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

}

.small-screen {
  width: 160px;
  display: inline-block;
}

<div class="container">

  <span class="title">
    Card header
  </span>

  <button class="action-button">
    Action
  </button>

</div>

<br/>

<div class="container">

  <span class="title small-screen">
    Card header title here is longer
  </span>

  <button class="action-button">
    Action
  </button>

</div>

【讨论】：

这是一个有趣的解决问题的方法
@Raul 来自 w3schools 上的文章How To Center Elements Vertically

【解决方案4】：

使用 display:table 和 table-cell 和 vertical 对齐 middle属性

.container {
    padding: 35px 2px;
    border: 1px solid gray;
    display: table;
    width: 100%;
    vertical-align: middle;
}

.title {
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;
}

.action-button {
    float: right;
    height: 50px;
    width: 100px;
    display: table-cell;
    vertical-align: middle;
}

.small-screen {
  width: 160px;
  display: inline-block;
}

HTML:

<div class="container">

  <span class="title">
    Card header
  </span>

  <button class="action-button">
    Action
  </button>

</div>

<br/>

<div class="container">

  <span class="title small-screen">
    Card header title here is longer
  </span>

  <button class="action-button">
    Action
  </button>

</div>

【讨论】：