如何在没有任何div的情况下将Anchor标记元素垂直和水平居中



那么如何垂直和水平居中定位标签链接呢?没有使用div或任何父元素。我只想把它居中,如下图所示。这就是我想要的样子。

这是我的代码:

<html>
<head>
<style type="text/css">
body{
background:#000;
}
.link{
font-size:40px;
}
</style>
</head>
<body>
<center><a class="link" href="#">BornExplorer</a></center>
</body>
</html>

如果您要使用单个链接进行整页设置,您可以使用line-height:100vh设置居中,这意味着行高度是页面高度的100%。

html,body{width:100%;height:100%;margin:0;}
body{
  background:#000;
  line-height:100vh;
}
.link{
  font-size:40px;
  line-height:1;
  display:inline-block;
}
<center><a class="link" href="#">BornExplorer</a></center>

如果锚标记框的宽度和高度是固定的,那就很简单了。假设您想相对于视口定位标签:

html { background: black; color: white; }
.centered {
  /* size */
  width: 10em;
  height: 1em;
  
  /* positioning */
  margin-left: -5em; /* -(width/2) */
  margin-top: -0.5em; /* -(height/2) */
  position: fixed;    /* relative to viewport */
  left: 50%;
  top: 50%;
  
  /* just aesthetic styling */
  text-align: center;
  color: white;
  font-weight: bold;
  background: rgba(255,255,255,0.3);
}
<a class="centered" href="#">Centered</a>

相关内容

  • 没有找到相关文章

最新更新