html - 将一些链接与 CSS 对齐

标签 html css

我正在尝试制作一个网站,但不太清楚我们需要哪些 CSS 才能正确对齐我的文本。我想让三个链接直接在我的名字下方对齐,一个在末尾,一个在中间,一个在另一端。

这是我的 HTML,后面是我的 CSS:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Nick Friederich</title>
        <link rel="stylesheet" type="text/css" href="./CSS/main.css" />
    </head>


    <body>
        <div id="wrapper" class="wrapper">

            <div id="header">

            </div>

            <div id="main" class="main">
                <h1>Nick Friederich</h1>

                    <span class="sectionLinks"><a>About</a></span>
                    <span class="sectionLinks"><a>Resume</a></span>
                    <span class="sectionLinks"><a>Portfolio</a></span>
            </div>
        </div>
    </body>



</html>

CSS:

    body {
    font-family:Helvetica, Times, Sans-Serif;
    color: #666;
    background-color: #eee;
}

h1{
    font-size:75px;
}

.sectionLinks{
    margin-right:20px;
    margin-left: 20px;
    margin-top: -20%;

}

.main{
    position: absolute;
       width: 50%;
       left: 50%;
       margin-left: -20%;
       height: 40%;
       top: 50%;
       margin-top: -20%;
       margin-bottom: -50%;
}

.wrapper{
    margin:0 auto;
    text-align:center;
}

最佳答案

明白了。我只是修改了 h1 的边距

关于html - 将一些链接与 CSS 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3827923/

相关文章:

html - 手机网站URL的Swift HTML内容

html - 导航栏与标题重叠,框阴影未显示,无法更改 h1 字体大小

css - 如何只打印页面的特定部分?

php - PHP 包含标题有问题

html - 绝对定位的图像 div 在其左侧溢出内容

html - 当 div 穿过特定位置时触发动画

html - 重置影响内联样式和表格属性的 CSS

html - 想要在鼠标悬停时隐藏 <div>,同时允许后面的链接处于事件状态

javascript - 带有 JS 的 jQuery 移动 slider

css - 当元素类型不同时禁用最后一个元素的边框