Question

我做了一些关于保证金崩溃及其运作方式的研究，但大多数例子都使用了亲子情况。我想要边距的元素（div）没有父元素。

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

将元素向下推 20px。

JSfiddle

BTW：<center>已被弃用，是一个过时的元素。

此功能已从Web标准中删除。虽然有些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能随时中断。

边缘坍塌相邻元素

1 个答案: