如何对齐我的导航栏 css

Question

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

Answer 1

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>

Answer 2

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>