Как я могу поместить изображение в середине верхней части страницы?

Question

Я хотел знать, как поместить изображение в середину страницы.Пример:

(Вам нужно как минимум 10 репутаций, чтобы публиковать изображения. Поэтому я должен выложить это так :)

HTML для Navbarэто:

<div class="sidebar, navs">
        <div class="collapse navbar-collapse m-0 ad-user sidebar-form, p-3 mb-2 bg-info text-white" id="navbar-collapse">
                    <ul class="nav navbar-nav">             
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <div id="profile_view_image"></div>
                                <span class="hidden-xs">DeviceBooker</span>
                            </a>
                            <ul class="dropdown-menu" style="width: 160px">
                                <li><a href="">Home<i class="fa fa-user"></i> </a></li>
                                <li><a href="/create">Book<i class="fa fa-user"></i> </a></li>
                                <li><a href="/calendar">Kalender<i class="fa fa-key"></i> </a></li>
                                <li><a href="/about"> Info <i class="fa fa-key"></i></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <section><router-outlet></router-outlet>

Спасибо за каждый ответ!

Answer 1

шаги: - 1. установить контейнер изображений с фиксированной высотой и шириной 2. поместите изображение в контейнер изображения 3. установить маржу: 0px авто; для контейнера изображения ----- сделано ---

.image-conatiner{
  width:100px;
  height:60px;
  margin:0px auto;
}

.img-responsive{
  width:100%;
  height:100%:
}

<div class="image-conatiner">
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="google" class="img-responsive">
</div>