HTML：按兄弟元素的中心定位元素答案

【问题标题】：HTML: Position element by the center of siblingHTML：按兄弟元素的中心定位元素
【发布时间】：2017-09-01 16:02:57
【问题描述】：

抱歉，有一个转储问题。我从来没有使用过 HTML。我有以下用户界面：

我想将Success 集中在sendMessage 元素的中间。

<div style="position: relative; overflow: hidden;">
      <div style="position: relative; width: 40%; float: left; vertical-align:middle">
            <button class="btn btn-default">sendMessage</button>
      </div>
      <div style="position: relative; width: 40%; float: right; vertical-align:middle">
            <span class="label label-success" style="font-size: small;">Success</span>
      </div>
</div>

我做错了什么？

【问题讨论】：

标签： html css css-selectors css-float vertical-alignment

【解决方案1】：

像这样尝试display: inline-block 和vertical-align: middle：

.send-button {
  display: inline-block;
  border: solid 1px black;
  background: #ccc;
  margin: 8px;
  padding: 8px;
  vertical-align: middle;
  }

.success-info {
  display: inline-block;
  background: #9b8;
  color: white;
  vertical-align: middle;
  padding: 2px;
  font-weight: bold;
  }

<div class="parent">
  <button class="send-button">Send Message</button>
  <div class="success-info">Success!</div>
</div>

【讨论】：

【解决方案2】：

目前，它们是两个不同的 div，在一个更大的 div 中。两个 div 都根据较大的 div 对齐。

如果你想把这些 div 'over' 放在一起，你必须使用 position:relative 加上类似：left 100px，以便将顶部 div 移动到下部 div 上（你可能必须使用一个 Z 索引，以便在顶部获得正确的 div）。

或者，将“成功”div 放在“按钮 div”内可能会起作用。如果您随后将按钮显示为display:flex，并将“成功 div”对齐到中心，它应该也可以工作。

【讨论】：

【解决方案3】：

它更容易使用inline-blocks 而不是浮动 div。试试这样的：

.box {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
  height: 50px;
  text-align: center;
}
.box:before{
  display: inline-block;
  vertical-align: middle;
  content: '';
  height: 100%;
  
  }
.left {
  float: left;
}
.right {
  float: right;
}

<div>
  <div class="box">
    <button id="resetCache" class="btn btn-default">sendMessage</button>
  </div>
  <div class="box">
    <span id="resetCacheResponse" class="label label-success" style="font-size: small;">message</span>
  </div>
</div>

【讨论】：

【解决方案4】：

只需添加即可实现

display: inline-block;

在您使用的相同样式代码中

vertical-align: middle;

因为没有设置显示你的代码不能正常工作。

【讨论】：