保證金坍縮相鄰元素

Question

我對保證金崩潰及其工作原理做了一些研究，但大多數示例都使用親子情況。 我想要保證金的元素（div）沒有父級。

https://jsfiddle.net/3yaqdyz8/

<center> 
        <h2>Profile</h2> 
        Username goes here<br> 
        Balance: 0.00 <div class="coin coin-1"></div> 
</center> 

.coin 
{ 
    display:inline-block; 
    margin-top:5px; /*Problem here*/ 
    background: url('http://infrox.us.lt/coin.png'); 
    background-size:cover; 
    background-repeat:no-repeat; 
} 
.coin-1 
{ 
    height:25px; 
    width:25px; 
} 

我需要使圖像DIV（.coin），比文本的其餘部分稍低。相反，它將div移動到旁邊的文本中。我如何只移動圖像div？

Answer 1

在行內塊元素上使用vertical-align。

.center { 
 
    text-align: center; 
 
} 
 
.coin { 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    /*Problem here*/ 
 
    background: url('http://infrox.us.lt/coin.png'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    vertical-align: bottom; 
 
} 
 
.coin-1 { 
 
    height: 25px; 
 
    width: 25px; 
 
}

<div class="center"> 
 
    <h2>Profile</h2> 
 
    Username goes here 
 
    <br>Balance: 0.00 
 
    <div class="coin coin-1"></div> 
 
</div>

如果這還不夠，你可以調整，如使用相對定位的元素位置...

.coin 
{ 
    position: relative; 
    top: 20px; 
} 

這將推動元素下 20像素。

JSfiddle

順便說一句：<center>已棄用，是過時的元件。

此功能已從Web標準中刪除。儘管一些瀏覽器可能仍然支持它，但它正在被丟棄。不要在舊項目或新項目中使用它。使用它的頁面或Web應用程序可能會隨時中斷。