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>

Answer 2

目前，他們是兩個不同的divs，在一個更大的div。兩個div都按照較大的div進行排列。

如果你想把這些div放在'彼此'上，你必須使用position:relative並加上如下內容：left 100px，爲了將頂部div移到下部div（你可能必須使用Z-索引以及，以獲得正確的div）。

或者，它可能會將「成功」div放在「按鈕div」中。如果您然後將按鈕顯示爲display:flex，並將「成功div」與中心對齊，則它也應該可以正常工作。

Answer 3

它更容易使用，而不是浮動的div inline-block秒。嘗試是這樣的：

.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

您可以實現只在您使用

vertical-align: middle; 

由於沒有設置顯示您的同一款式的代碼添加

display: inline-block; 

代碼無法正常工作。