Question

我无法在导航栏中居中我的徽标。我已经浏览了其他帖子，但没有一个解决方案似乎没有搞乱别的东西。我不明白为什么徽标不会居中，我需要网站做出回应。

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Recruitment</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="events.html">Events</a>
            </li>
        </ul>
    </div>

    <div class="mx-auto order-0">
      <a class="navbar-brand mx-auto" href="template.html">
        <img src = "logo.png" width="100" alt="logo thing">
      </a>
    </div>

    <div class="hamburger-menu">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Leadership</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Sisterhood</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Philanthropy</a>
            </li>
        </ul>
    </div>
</nav>

这里是html的css。

.navbar>.container .navbar-brand-centered, 
.navbar>.container-fluid .navbar-brand-centered {
    margin-left: -80px;
    position: relative;
    float: center;
    }
}


.navbar{
  font-family: Montserrat;
  font-size: 1em;
}

/* change spacing for nav items*/
.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
}

.nav-item, .navbar-nav{
  font-family: Montserrat;
}

Answer 1

.navbar>.container .navbar-brand-centered, 
.navbar>.container-fluid .navbar-brand-centered {
    margin-left: -80px;
    position: relative;
    float: center;
    }
}

float:center;之后你有一个额外的突破括号。

没有float:center;

这样的东西

有多种方法可以集中精力。最简单的是：

.parent-element {
  display: flex;
  justify-content: center;
}

如果父级是position: relative，您可以将目标元素位置设为绝对位置并执行此操作https://codepen.io/anon/pen/EQGgpM：

.parent-element {
  position: relative;
  width: 200px;
  height: 50px;
  outline: 1px solid #000;
}

.child {
  position: absolute;
  outline: 1px solid #cc0000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

img元素响应text-align: center就好了。

＆＃13;

html, body {
  width:100%;
  text-align: center;
}

＆＃13;

<img src="https://telecomputingarchitects.com/media/logo.png" alt="logo" height="48">

＆＃13;

导航栏中的中心徽标

2 个答案: