HTML:由兄弟中心定位元素

Question

抱歉转储问题。我从未使用过 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>

我做错了什么？

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