Question

对于作业，我创建了一个内联＆＃34;无序列表＆＃34;有多个列表项（这是我的社交链接）。我还删除了每个＆＃39; li＆＃39;项目

但是，我无法让列表居中对齐。它似乎被一些像素推到右边。

我做错了什么？

HTML：

    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Exo:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css' />
</head>
<body>
    <header class="headerstyle1">
        <nav>
        <a href="#" title="Contact Me" ="#" class="button2">Contact</a>
        <a href="#" title="Résumé" class="button1">Résumé</a>
        <a href="#" title="About Me" class="button1">About Me</a>
    </nav>
        <div class="ninesixty">
            <h1>Rayan Jawad</h1>
            <h2>Data Marketer // Growth Hacker</h2>

            <ul class="sociallist">
                <li><a href="#" title = "Facebook">             FB</a></li>
                <li><a href="#" title = "Twitter">              TW</a></li>
                <li><a href="#" title = "Google Plus">          GP  </a></li>
                <li><a href="#" title = "Linkedin">LI</a></li>
                <li><a href="#" title = "Skype">                SK</a></li>
                <li><a href="#" title = "Instagram">        IG</a></li>
                <li><a href="mailto:#" title = "Email Me">EM                </a></li>
            </ul>
        </div>

Answer 1

使用text-align：center;

<head>
<meta charset="utf-8" />

<!--Font Awesome - for Social Media Icons -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

<!--Google Font -->
<link href='http://fonts.googleapis.com/css?family=Exo:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css' />



<title>Rayan Jawad</title>

<!-- Top Part of the Page -->
<header class="headerstyle1">
<nav>
    <a href="#" title="Contact Me" ="#" class="button2">Contact</a>
    <a href="#" title="Résumé" class="button1">Résumé</a>
    <a href="#" title="About Me" class="button1">About Me</a>
</nav>
    <div class="ninesixty">
        <h1>Rayan Jawad</h1>
        <h2>Data Marketer // Growth Hacker</h2>

        <ul class="sociallist">
            <li style=" text-align: center;"><a href="#" title = "Facebook">             FB</a></li>
            <li style=" text-align: center;"><a href="#" title = "Twitter">              TW</a></li>
            <li style=" text-align: center;"><a href="#" title = "Google Plus">          GP  </a></li>
            <li style=" text-align: center;"><a href="#" title = "Linkedin">LI</a></li>
            <li style=" text-align: center;"><a href="#" title = "Skype">                SK</a></li>
            <li style=" text-align: center;"><a href="#" title = "Instagram">        IG</a></li>
            <li style=" text-align: center;"><a href="mailto:#" title = "Email Me">EM                </a></li>
        </ul>
    </div>

</header>

将内联无序列表居中

1 个答案: