Align some links with CSS
I'm trying to make a website, but can't quite figure our some of the CSS needed to align my text correctly. I would like to have the three links aligned directly underneath my name one at the end, one in the middle and one at the other end.
Here is my HTML followed by my 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="sect开发者_如何学JAVAionLinks"><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;
}
Got it. I just modified the margin of the h1
While you've fixed the problem, it's very common to wrap your links in a div and style them inside the div.
<div id="main">
<h1>Nick Friederich</h1>
<div id="links">
<span class="sectionLinks"><a>About</a></span>
<span class="sectionLinks"><a>Resume</a></span>
<span class="sectionLinks"><a>Portfolio</a></span>
</div>
</div>
You'd move the container with the links id and space the links based on their class.
Edit: Also, make sure you are using id and class properly in your CSS. Class is to be used if you're going to have multiple instances of that item on the site, id is for unique items.
加载中,请稍侯......
精彩评论