css - 如何将图像放在页面顶部的中间？

Question

我想知道如何将图像放在页面的中间顶部。一个例子:

(您至少需要 10 个声誉才能发布图像。所以我必须这样发布:)

导航栏的 HTML 是:

<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 auto；对于图像容器 -----完成---

.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>