How can I bring these inline block elements to one place?-CodePudding

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 >    
    <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!

CodePudding user response：

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;
}

More about flex layout

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 >    
    <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>