CODEWITHSUNDEEP
browserresizecenter
Cwtch22
Cwtch22

Reputation: 79

How to center links perfectly even when screen resizes? HTML & CSS

Okay guys, so here's the problem, I have a set of links (3 in total, titled "News", "About" and "Contact", I wish to perfectly center these, allowing them to stay directly in the center of the users screen beneath my logo. Here's my code;

HTML;

<!DOCTYPE html>
<html>
<head>
<title>BHD - BlackHawk Drift</title>
<!--Scripts-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="scripts/fadein.js"></script>
<script src="scripts/buttonfade.js"></script>

<link rel="stylesheet" type="text/css" href="css/stylemain.css">
<!--end scrpts-->
<!--setting the basic styles-->
<style>
a:link {
color: #FAFAFA;
}
</style>
</head>

<body>
<!--Providing the text-->
<img class="displayed" src="img/text.png" alt="#blackhawk drift">
<!--end-->

<!--basic mainpage links-->
<div class="link">
<p1><a href="about.html" style="text-decoration:none">About</a></p1>&nbsp;
<p1><a href="news.html" style="text-decoration:none">News</a></p1>&nbsp;
<p1><a href="contact.html" style="text-decoration:none">Contact</a></p1>&nbsp;
</div>

</body>
</html>

CSS;

html { 
background: url(../img/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 400px;
}

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto; 
margin-top: 23%;
position: relative;
}

.link {
display: block;
padding: 2px;
letter-spacing: 6px;
position: relative;
margin-left: auto;
margin-right: auto; 
}

And here's a visual image of what I am trying to accomplish...

enter image description here

EDIT: I have managed to do this!:) I just added "text-align: center;" to my class in CSS.

Upvotes: 0

Views: 67

Answers (1)

Cwtch22
Cwtch22

Reputation: 79

Just add text-align: center; to the css class ".link"

Upvotes: 1

Related Questions