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自动；用于图像容器 -----完成---

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

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

1 个答案: