Как разместить изображение ТОЧНО там, где я хочу (и реагировать) в Bootstrap NavBar

Мне нужно имитировать навигационную панель на 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>

html css twitter-bootstrap image navbar

20.11.2018 00:11

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Для вашего изображения усвойте и добавьте следующий CSS:

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

В качестве фонового изображения усвойте и добавьте следующий CSS:

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

Помимо этого, мне нужно было бы увидеть вашу проблему, либо со ссылкой на ваш веб-сайт, либо с демонстрацией вашей проблемы на JSfiddle, CodePen или более подробным фрагментом.

— 20.11.2018 00:22

Это не делает ничего, кроме помещения изображения в середину моей панели навигации, оно все еще не вверху.

— 20.11.2018 02:42

@OllieRichardson Для CodePen добавьте свои <script src = "..."> и <link href = ""> в начало HTML.

— 20.11.2018 03:02

20.11.2018 00:22