Menu
I can't seem to get my "Home" buttons to the center. The home text is at the left instead of the center.I have my htm and css linked like this: html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="background.css"/>
</head>
<body>
<h1>Bully-Free Zone</h1>
<h2>"Online harassment has an off-line impact"</h2>
<a href="New.html" class="nav-link">Home</a>
</body>
</html>
Css:
a.nav-link:link
{
color: black;
text-decoration: underline;
font-family:broadway;
font-size:30px;
text-align:center;
}
a.nav-link:visited
{
color: black;
text-decoration: none;
}
a.nav-link:hover
{
color: black;
text-decoration: none;
}
a.nav-link:active
{
color: black;
text-decoration: none;
}
827
You could wrap it in a div:
<div align="center">
<a href="New.html" class="nav-link">Home</a>
</div>
Or you can create a class for the div:
HTML:
<div class="myDiv">
<a href="New.html" class="nav-link">Home</a>
</div>
CSS:
.myDiv {
text-align: center;
width: 300px;
}
The text-align property will only center the text within the container it's in. In this case, the a tag is only as wide as the text. So regardless how you set your text-align property on that link tag, it will always appear the same. To center it you need to put it in an element that is wider.
<div id="nav">
<a href="New.html" class="nav-link>Home</a>
</div>
and your css:
#nav
{
text-align: center;
}
Good Luck!
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
