Question

试图谷歌这个，但没有找到任何帮助我的东西。所以我左右两侧都有按钮文字，但我想将图像置于顶栏内。

＆＃13;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f3f3f3;
    }

    li {
    float: left;
    }

    li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    li a:hover:not(.active) {
    background-color: #ddd;
    }

    li a.active {
    color: white;
    background-color: #3744a2;
    }

＆＃13;

<ul>
    <li><a href="../index.html">home</a></li>
    <li><a href="../news/news.html">news</a></li>
    <li><a href="../services/services.html">services</a></li>
    <li><a class="active" href="#">prices</a></li>
    <li><a href="../contat/contat.html">contat</a></li>
    <li><a class="image" href="#"><img src="https://dummyimage.com/150X38/000/fff"></a></li>
    <li style="float:right"><a href="mailto:enter@email.here"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp; enter@email.here</a></li>
    <li style="float:right"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>&nbsp; 123 123 123</a></li>
    </ul>

＆＃13;

所以我基本上想要的是图像（class =＆＃34;图像＆＃34;）要居中，但其余的都是。

非常感谢！

Answer 1

a.image {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

尝试在css文件中添加该代码。另请试试看看here 它有更多关于居中的信息。

Answer 2

这样做

从image代码中移除a课程，并将image课程提供给其父li，并尝试使用此示例。它会帮助你

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
text-align: center;
}

li {
float: left;
}

li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #ddd;
}

li a.active {
color: white;
background-color: #3744a2;
}
li.image {
    float: none;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="../index.html">home</a></li>
<li><a href="../news/news.html">news</a></li>
<li><a href="../services/services.html">services</a></li>
<li><a class="active" href="#">prices</a></li>
<li><a href="../contat/contat.html">contat</a></li>
<li class='image'><a class="" href="#"><img src="../image/image.png"></a></li>
<li style="float:right"><a href="mailto:enter@email.here"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp; enter@email.here</a></li>
<li style="float:right"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>&nbsp; 123 123 123</a></li>
</ul>

Answer 3

我使用了display：flex和flex属性。通过设置display：flex：0我告诉浏览器我希望这个元素只占用他需要的位置，并且在单个元素上使用flex：1我告诉我希望它能够采取所有可能地方

＆＃13;

div.nav {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f3f3f3;
  display: flex;
  }

  div.left-part, div.right-part {
    flex: 0;
    display:inline-block;
    white-space: nowrap;
  }

  div.center-part {
    flex: 1;
    text-align: center;
  }


  div.nav-button {
  display:inline-block;
  }

  div.nav-button a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  }

  div.nav-button a:hover:not(.active) {
  background-color: #ddd;
  }

  div.nav-button a.active {
  color: white;
  background-color: #3744a2;
  }

＆＃13;

<div class="nav">
  <div class="left-part"><div class="nav-button"><a href="../index.html">home</a></div>
    <div class="nav-button"><a href="../news/news.html">news</a></div>
    <div class="nav-button"><a href="../services/services.html">services</a></div>
    <div class="nav-button"><a class="active" href="#">prices</a></div>
    <div class="nav-button"><a href="../contat/contat.html">contat</a></div>
  </div>
  <div class="center-part">
    <div class="nav-button"><a class="image" href="#"><img src="../image/image.png"></a></div>
  </div>
  <div class="right-part">
    <div class="nav-button"><a href="mailto:enter@email.here"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp; enter@email.here</a></div>
    <div class="nav-button"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>&nbsp; 123 123 123</a></div>
  </div>
</div>

＆＃13;

中心图像在ul

3 个答案: