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

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

如果你想把那些 div 和 'over' 放在一起，你必须使用 position:relative 加一个像：left 100px，才能移动顶部 div 在较低的 div 之上（您可能还必须使用 Z-index，以便在顶部获得正确的 div）。

或者，将 'success' div 放在 'button div' 中可能会起作用。如果您随后将按钮显示为 display:flex，并将 'success div' 对齐到中心，它应该也能正常工作。

Answer 2

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

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

Answer 4

只需添加即可实现

display: inline-block;

与您使用的相同样式代码

vertical-align: middle;

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

HTML: 以兄弟节点为中心定位元素

HTML: Position element by the center of sibling

html

css

css-selectors

vertical-alignment

css-float