flexbox中的文本移动居中图像

Question

我有一个正在尝试创建的导航栏。它的左边有文字，右边有文字。中间是一张图。我正在使用 flexbox 来创建这个导航栏。我的图像居中，文本在左右。但是，每次我尝试在文本上使用边距或填充添加间距时，图像本身都会移动并且不再居中。

HTML

<header>
  <div class="header_container">
    <ul class="nav_menu">
      <li class="nav_text">Support</li>
      <li class="nav_text">Forum</li>
      <li class="nav_text">Live Chat</li>
      <li class="header_logo">

      </li>
      <li class="auth_btns">Login</li>
      <li class="auth_btns">Sign Up</li>
    </ul>
  </div>
</header>

CSS

header{
    width: 100%;
    height: 60px;
    background-color: white;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 0 10px 0 rgba(0, 0, 0, 0.19);
}

.header_container{
    width: 90%;
    margin: 0 auto;
}

.nav_menu{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
}

.nav_text{
  margin-right: 20px;
}

.header_logo{
    margin: 0 auto;
    width: 200px;
    height: 60px;
    background: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") no-repeat;
    background-size: 200px 60px;
}

我试图在 .nav_text 上设置一个边距，但每次我这样做时，徽标图像都会随之移动，并且不再居中。我怎样才能解决这个问题？这是jsfiddle

Answer 1

它仅在中心位置对齐。可能你会看到一些分心，因为最后一个.nav-item 也有margin-right。要修复这个问题，您必须为最后一个 nav-item 元素应用 margin-right:0px。

我添加了一个类并为最后一个导航项应用margin-right:0px。看下面的片段。

header{
    width: 100%;
    height: 60px;
    background-color: white;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 0 10px 0 rgba(0, 0, 0, 0.19);
}

.header_container{
    width: 90%;
    margin: 0 auto;
}

.nav_menu{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
}

.nav_text{
  margin-right:30px;
}
.no-margin {
  margin-right:0px;
}

.header_logo{
    margin: 0 auto;
    width: 200px;
    height: 60px;
    background: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") no-repeat;
    background-size: 200px 60px;
}

<header>
        <div class="header_container">
            <ul class="nav_menu">
                <li class="nav_text">Support</li>
                <li class="nav_text">Forum</li>
                <li class="nav_text no-margin">Live Chat</li>
                <li class="header_logo">

                </li>
                <li class="auth_btns">Login</li>
                <li class="auth_btns">Sign Up</li>
            </ul>
        </div>
    </header>

更新

如果您希望您的徽标固定在标题部分的中心位置，而不用担心导航链接被触摸或覆盖，然后应用 UL 的背景图片而不是 li，如下所示。

header {
  width: 100%;
  height: 60px;
  background-color: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 0 10px 0 rgba(0, 0, 0, 0.19);
}

.header_container {
  width: 90%;
  margin: 0 auto;
}

.nav_menu {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
}

.nav_text {
  margin-right: 30px;
}    

.header_logo {
  margin: 0 auto;
  width: 200px;
  height: 60px;
}
ul.nav_menu {
  background: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") no-repeat;
    background-size: 200px 60px;
    background-position:center center;
}

<header>
  <div class="header_container">
    <ul class="nav_menu">
      <li class="nav_text">Support</li>
      <li class="nav_text">Forum</li>
      <li class="nav_text">Live Chat</li>
      <li class="header_logo">

      </li>
      <li class="auth_btns">Login</li>
      <li class="auth_btns">Sign Up</li>
    </ul>
  </div>
</header>

FIDDLE LINK

Answer 2

/*Default all ul to list none*/
ul {
  list-style: none;
}

/*Make all descendant containers flex with no wrap for large screens*/
header{
  display: flex;
  flex: no-wrap;
  align-items: center;
  justify-items: center;
  padding: 1px 20px;
  background-color: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 0 10px 0 rgba(0, 0, 0, 0.19);
}

/*Make li flex items. No flex basis attached so that the li give width*/
.nav_menu{
  display: flex;
  align-items: center;
}

/* Let all the remaining space be given to the image container. As the items on the lists in the sides increase, the logo container will reduce*/
.header_logo {
  flex: 1;
  text-align: center;
}

/* Restrict height alone and leave width flexible*/
.header_logo img {
  width: auto;
  height: 50px;
  padding: 10px 0;
}


/*Make li flex items. No flex basis attached so that the li give width*/
.right_menu {
  display: flex;
}

/* li items give us the width of parent containers*/
.nav_menu li,
.right_menu li {
  padding: 0 2rem;
  flex: auto;
  align-content: center;
  text-align: center;
}


/*Make all descendant containers flex with wrap for mobile. We can incorporate order properties too*/
@media screen and (max-width: 960px) {
  header{
    flex: wrap;
    flex-direction: column;
  }
}


@media screen and (max-width: 520px) {
  .nav_menu,
  .right_menu {
    flex: wrap;
    flex-direction: column;
  }
}

<!--Restructure the HTML so I can have more control on the different elements. Possibility of reordering the items on mobile-->
<header>
    <ul class="nav_menu">
      <li class="nav_text">Support</li>
      <li class="nav_text">Forum</li>
      <li class="nav_text">Live Chat</li>
    </ul>
    <div class="header_logo">
      <img class="" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
  <ul class="right_menu">
      <li class="auth_btns">Login</li>
      <li class="auth_btns">Sign Up</li>
      <li class="auth_btns">Me Up</li>
  </ul>
</header>