html - 当你在侧面有导航栏时如何使元素居中？

Question

对于我的学校元素，我可以选择一个基于我们过去两年所做工作的主题。我选择了网络开发。我创建的网站只是整理与主题相关的各种资源，这很容易。

我遇到的唯一问题是当侧面有导航栏时居中元素。

例如，我试图在主页上包含这张“Brackets”图像，但当我想将它居中时，它相对于屏幕而不是相对于容器居中。

(箭头指向我试图将事物居中的位置)

链接到 jsfiddle

.navbar-fixed-left {
  width: 140px;
  position: fixed;
  border-radius: 0;
  height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
  float: none;
  /* Cancel default li float: left */
  width: 139px;
}
.navbar-fixed-left + .container {
  padding-left: 160px;
}
/* On using dropdown menu (To right shift popuped) */

.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
  margin-top: -50px;
  margin-left: 140px;
}
.sidebarheader {
  height: 35px;
  border-radius: 1px;
  border-bottom: 2px solid #9d9d9d;
}
.sidebaritem {
  height: 35px;
}
body {
  background-color: #fcfcfc;
}
.jumbotron {
  margin-top: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-left">
  <a class="navbar-brand" href="index"><i class="fa fa-code" aria-hidden="true"></i></a>
  <ul class="nav navbar-nav">
    <!--      HTML Section-->
    <li class="sidebarheader"><a href="">HTML</a>
    </li>
    <li class="sidebaritem"><a href="">Basic Reference</a>
    </li>
    <li class="sidebaritem"><a href="">Bootstrap</a>
    </li>
    <li><a href="">Icons</a>
    </li>
    <!--      CSS Section-->
    <li class="sidebarheader"><a href="">CSS</a>
    </li>
    <li class="sidebaritem"><a href="">Basic Reference</a>
    </li>
    <li class="sidebaritem"><a href="">Specificity</a>
    </li>
    <li class="sidebaritem"><a href="">Selectors</a>
    </li>
    <li class="sidebaritem"><a href="">Fonts</a>
    </li>
    <!--      Javascript Section-->
    <li class="sidebarheader"><a href="">Javascript</a>
    </li>
    <li class="sidebaritem"><a href="">Basic Reference</a>
    </li>
    <li class="sidebaritem"><a href="">Plugins</a>
    </li>
  </ul>
</div>
<div class="container">
  <div class="page-header">
    <h1>Web Developer Reference</h1>
    <p>A website containing information for web development.</p>
  </div>


</div>
<img class="center-block" src="http://brackets.io/img/hero.png">

Answer 1

否则你犯了一个简单的错误，你没有将 img 标签包含到容器中。它是外部容器元素。

这是 corrected code .我注意到您在图像本身中包含了边距。您不需要那个余量。

<div class="container">
  <div class="page-header">
    <h1>Web Developer Reference</h1>
    <p>A website containing information for web development.</p>
  </div>
  <div class="page-content">
     <img class="responsive" src="http://brackets.io/img/hero.png">
  </div>
</div>

编辑:我对您的代码进行了一些其他调整。我不确定你是否想要那个，但它效果更好。我还添加了响应式图像，每次都适合容器。

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