Question

我有一个问题，理解为什么将 text-align 属性设置为右值，将span标记移出锚标记区域（溢出）？

HTML文档的结构

＆＃13;

a.btn{
  border: 1px solid #00A0D6;
  border-radius: 30px;
  background-color: #00A0D6;
  text-decoration: none;
  color: white;
  text-align: right;
  width: 250px;
  height: 20px;
  position: relative;

  display: inline-block;
  margin: auto;
}

.container{
  margin: 90px;
}

.top-content{
  position: absolute;
  text-align: center;
}

.bottom-content{
  position: absolute;
  top: 100px;
}

＆＃13;

<a href="#" class="btn">
  <span class="top-content">Buy now</span>
  <span class="bottom-content">Sale for $40</span>
</a>

＆＃13;

我甚至无法正确对准span标记。我不明白为什么？

Answer 1

<强>解决方案
您必须将position: absolute移除到范围，然后将text-align: center添加到<a>。

如果您想保留position: absolute，只需将left: 100px添加到<span>。

<强>解释
如果您将position:abolute置于居中位置，则必须记住父级的宽度。如果没有，<span>正好适合它。换句话说，您必须text-align:center到<a>，因为您希望将其中的内容集中在一起。

为什么为锚标记设置text-align为右，移动锚标记内的span标记，移出锚标记

1 个答案: