css - center nav logo remove parent div click 功能

Question

我正在尝试完成以下操作，但由于某种原因，我无法让图像像下面的布局一样保持在中心位置。

问题是整个 div 即使 Logo 是可点击的，我只希望图标可点击。

我还希望 Logo 保留在中心，菜单图标位于与下图完全相同的位置。

$(document).ready(function() {
	$(".mobile-menu").on('click', function(){
		$(".mobile-dropdown").slideToggle("fast");
	});
});

.mobile-menu {
  width: auto;
  position: relative;
  padding: 0;
}

.logo{
	display: inline-block;
}

.mobile-menu a.dropdown-link{
  display: block;
  height: 80px;
  padding: 0 20px;
  color: #FFFFFF;
  font-size: 20px;
  cursor: pointer;
  background: #000000;
}

.mobile-menu a.dropdown-link:hover{
	text-decoration: none;
}
.mobile-menu a.dropdown-link i{
	float: right;
	position: relative;
	top: 15px;
}

.mobile-dropdown {
  display: none;
  list-style-type: none;
  background: #000000;
  padding: 0;
  min-width: 125px;
  position: relative;
  z-index: 100;
  margin: 0;
}

.mobile-dropdown li{
  padding: 0;
  height: auto;
}

.mobile-dropdown li a{
  color: #FFFFFF;
  display: block;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  text-decoration: none;
}

.mobile-dropdown li a:hover{
  text-decoration: none;
  background: #00adef;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="mobile-menu">
  <img class="logo" src="http://via.placeholder.com/65x65">
  <a class="dropdown-link">&#9776;</a>
  <ul class="mobile-dropdown">
    <li><a href="#">Uw specialist</a></li>
    <li><a href="#">Oplossingen</a></li>
    <li><a href="#">Greatest care</a></li>
    <li><a href="#">Budget smart</a></li>
    <li><a href="#">Over ons</a></li>
  </ul>
</div>

Answer 1

使用您当前拥有的标记，您可以绝对定位 Logo 。使用 left:0、right:0 和 margin:auto 使其居中。

$(document).ready(function() {
	$(".dropdown-link").on('click', function(){
		$(".mobile-dropdown").slideToggle("fast");
	});
});

.mobile-menu {
  width: auto;
  position: relative;
  padding: 0;
  background:black;
}

.logo{
	display: block;
  position:absolute;
  top:7px;
  left:0;
  right:0;
  margin:auto;
}

.mobile-menu a.dropdown-link{
  display: block;
  height: 80px; width:80px;
  padding: 0 20px;
  color: #FFFFFF;
  font-size: 20px;
  cursor: pointer;
  background: #000000;
}

.mobile-menu a.dropdown-link:hover{
	text-decoration: none;
}
.mobile-menu a.dropdown-link i{
	float: right;
	position: relative;
	top: 15px;
}

.mobile-dropdown {
  display: none;
  list-style-type: none;
  background: #000000;
  padding: 0;
  min-width: 125px;
  position: relative;
  z-index: 100;
  margin: 0;
}

.mobile-dropdown li{
  padding: 0;
  height: auto;
}

.mobile-dropdown li a{
  color: #FFFFFF;
  display: block;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  text-decoration: none;
}

.mobile-dropdown li a:hover{
  text-decoration: none;
  background: #00adef;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="mobile-menu">
  <img class="logo" src="http://via.placeholder.com/65x65">
  <a class="dropdown-link">&#9776;</a>
  <ul class="mobile-dropdown">
    <li><a href="#">Uw specialist</a></li>
    <li><a href="#">Oplossingen</a></li>
    <li><a href="#">Greatest care</a></li>
    <li><a href="#">Budget smart</a></li>
    <li><a href="#">Over ons</a></li>
  </ul>
</div>