如何将图像精确放置在Bootstrap NavBar中我想要的位置（并响应）

Question

我需要模仿www.nielsen.com上的导航栏，当前我的图像不在导航栏的顶部，我需要使其与标题的左侧对齐并根据屏幕尺寸移动。我该怎么做？

/* Navigation */
#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}

<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="https://i.stack.imgur.com/fKSTL.png" width="45" height="65" alt="Nielsen"> </a> </div>
  </div>
</nav>

Answer 1

对于您的图片，请理解并添加以下CSS：

position: absolute;
left: 50%;
transform: translateX(-50%);

对于您的背景图片，请理解并添加以下CSS：

background: url(...) center;
background-size: 1000px;