我只想将3个链接(形状成块)移动到中心。它应该很容易,但是我却不知道该怎么做。以水平居中为中心。这可能是一个愚蠢的错误或概念问题。我不想将文本移动到框的中央,只想移动框。
CSS:
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
header li{
list-style: none;
}
a:link, a:visited
{
text-decoration: none;
background-color: green;
border: 5px solid black;
color: white;
display: block;
text-align: center;
width: 200px;
position: relative;
margin-left: 240px;
margin-bottom: 5px;
}
a:hover, a:active{
color: black;
background-color: red;
margin-bottom: 10px;
font-size: 1.5em;
}
header li:nth-child(3)
{
font-size: 25px;
}
HTML:
<header>
<ul>
<li><a href="http://www.google.com" target="_blank"> Google</a></li> <!-- notice here how when 9i add "http:// the link will open and if don't it won't-->
<li><a href="www.facebook.com" target="_blank"> Facebook </a></li>
<li><a href="www.wikipedia.com" target="_blank"> Wikipedia </a></li>
</ul>
</header>
最佳答案
如何将整个无序列表显示为内联块,并将文本内容居中放置在标题中,如何使列表居中:
header{
text-align: center;
}
header > ul{
display: inline-block;
}
JSFiddle
注意:由于我认为这是为了使锚点更加中心化,因此我从锚点上去除了页边距。如果我错了纠正我。