那么如何垂直和水平居中定位标签链接呢?没有使用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>