Question

我正在努力完成一些应该很容易的事情：将a标记置于div内。我知道这是一个经典，有类似的问题，也可以用flexbox完成，但我试图避免后者。

＆＃13;

.wrapper {
  background-color: gold;
  height: 200px;
  width: 100%;
  position: relative;
  text-align: center;
  vertical-align: middle;
}
a {
  border: 4px dashed white;
  height: 95%;
  width: 95%;
  display: block;
  box-sizing: border-box;
}

＆＃13;

<div class="wrapper">
<a>
  Link
</a>
</div>

＆＃13;

欢迎任何帮助！

编辑：我希望a标记具有灵活性并填充wrapper，而不知道包装器的高度。

Answer 1

在包装器div中添加line-height

＆＃13;

.wrapper {
  background-color: gold;
  height: 200px;
  width: 100%;
  line-height:200px;
  position: relative;
  text-align: center;
  vertical-align: middle;
}
a {
  border: 4px dashed white;
  height: 95%;
  width: 95%;
  display: block;
  box-sizing: border-box;
}

＆＃13;

<div class="wrapper">
<a>
  Link
</a>
</div>

＆＃13;

在没有flexbox的情况下将div中的内联元素居中

1 个答案: