我只想将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

注意:由于我认为这是为了使锚点更加中心化,因此我从锚点上去除了页边距。如果我错了纠正我。

10-05 20:59
查看更多