.home {
background: transparent;
border: 1px solid #fff;
border-color: #fff;
border-radius: 10px;
font-weight: 700;
padding: 14px 36px;
margin-top: 200px;
margin-right: 5px;
}
-
<nav>
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="home"><a href="#">About</a></li>
<li class="home"><a href="#">Projects</a></li>
<ul>
</nav>
I provided my HTML and CSS code
Website looks like: http://prntscr.com/im5t4e
How do I centre my 3 buttons in the middle?
When you're trying to center elements inside a container, your best shot is to use Flexbox , since you can easily position items in a row or a column, change their order, among other things. In this particular case, you should try to use the justify-content property with the center value. Finally, give a display: inline
property to the li
elements so they're shown as inline elements instead of block-type elements.
Example:
CSS
nav {
display: flex;
justify-content: center;
}
li {
display: inline;
}
HTML
<nav>
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="home"><a href="#">About</a></li>
<li class="home"><a href="#">Projects</a></li>
<ul>
</nav>
Give text-align: center;
for ul
and display: inline-block;
for li
.
ul{
text-align:center;
}
.home {
background: transparent;
border: 1px solid #fff;
border-color: #fff;
border-radius: 10px;
font-weight: 700;
padding: 14px 36px;
margin-top: 200px;
margin-right: 5px;
display: inline-block
}
<nav>
<ul >
<li class="home"><a href="#">Home</a></li>
<li class="home"><a href="#">About</a></li>
<li class="home"><a href="#">Projects</a></li>
<ul>
</nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.