HTML：位于兄弟中心的位置元素

Question

抱歉转储问题。我从未使用过HTML。 我有以下UI：

我希望将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>

我做错了什么？

Answer 1

尝试display: inline-block与vertical-align: middle一样：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

目前，他们是两个不同的div，在一个更大的div中。两个div都按照较大的div进行对齐。

如果你想把这些div放在＆＃39;另外，您必须使用position:relative添加类似：left 100px，以便将顶部div移到下方div上（您可能还必须使用Z-index，为了获得正确的div）。

或者，它可能会成功地取得成功＆＃39;在＆＃39;按钮div内的div。然后，如果您将按钮显示为display:flex，并将“＆＃39;成功div”对齐到中心，它也应该工作。

Answer 3

更容易使用inline-block而不是浮动div。尝试这样的事情：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

只需添加

即可实现

display: inline-block;

使用相同的样式代码

vertical-align: middle;

因为没有设置显示，您的代码无法正常工作。