Issue
CSS:
.navbar a:link, a:visited {
background-color: goldenrod;
color: black;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: larger;
}
.navbar a:hover, a:active {
background-color: rgb(121, 130, 255);
}
HTML:
<div class="navbar">
<a href="html/home.html" target="_blank">Home</a>
<a href="html/about.html" target="_blank">About Us!</a>
<a href="html/properties.html" target="_blank">Property List</a>
<a href="html/terms.html" target="_blank">Terms & Conditions</a>
<a href="html/contact.html" target="_blank">Contact Us!</a>
</div>
I'm kind of a beginner to web development and trying to make websites with CSS, HTML only so I'm stuck on this issue where I can't seem to find how to get all those buttons to the place (Marked with red) in center
I tried searching around on google and well it resulted in failure, tried some properties like
align-items: center;
thinking that it'd work but nope.
Please help! thank you!
Solution
Assuming that the goal is to center the buttons (could not seem to find an area marked with red), you can style the container .navbar
:
.navbar {
display: flex;
justify-content: center;
}
Hope this will help.
Example:
.navbar {
display: flex;
justify-content: center;
}
.navbar a:link, a:visited {
background-color: goldenrod;
color: black;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: larger;
}
.navbar a:hover, a:active {
background-color: rgb(121, 130, 255);
}
<div class="navbar">
<a href="html/home.html" target="_blank">Home</a>
<a href="html/about.html" target="_blank">About Us!</a>
<a href="html/properties.html" target="_blank">Property List</a>
<a href="html/terms.html" target="_blank">Terms & Conditions</a>
<a href="html/contact.html" target="_blank">Contact Us!</a>
</div>
Answered By - John Li
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.