Question

我希望我的横幅居中，横幅上方的徽标。但是你可以看到徽标和横幅而不是居中。我怎样才能解决这个问题？

这里是现场版本：http://codepen.io/anon/pen/waYBxB

HTML

    </head>
    <body>

<!-- 
    ==============================
         LOGO HEADER
    ==============================
    -->
<section>
      <div class="container">
    <div class="row">
          <div class="col-md-6"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
          <div class="col-md-6"></div>
        </div>
  </div>
    </section>

<!--==============================
         SLIDING BANNEER
    ==============================-->
<section class="Banner ">
      <div class="container midText">
    <div class="col-md-12 text-center hidden-xs"><img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive"></div>
  </div>
    </section>

<!--==============================
         MENU BAR
    ==============================-->
<section>
<div class="container">
<div class="col-md-12">
      <nav>
    <ul>
          <li><a href="?p=home">Home</a></li>
          <li><a href="?p=home">Codepen.io</a></li>
          <li><a href="?p=home">A longer button</a></li>
          <li><a href="?p=home">This is my really long button</a></li>
          <li><a href="?p=home">About Us</a></li>
          <li><a href="?p=home">Contact</a></li>
        </ul>
  </nav>
    </div>
</section>

<!--==============================
         MAIN CONTENT
    ==============================-->
<section>
   <div class="container"  id="MainPage">
    <div class="row">
      <div class="col-md-9 MainContent"><h3>codepen ---- CODING HAS NEVER BEEN SO EASY!</h3><br> Notice how the white is centered but he image and the logo is not. How do I fix this?   </div>
          <div class="col-md-2">I AM IN THE BANNER SECTION </div>
        </div>
  </div>
    </section>
</body>
</html>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

CSS

body {
    background-image: url(http://oi60.tinypic.com/2hhnpzn.jpg);
}
nav ul {
    list-style: none;

    overflow: hidden;
    height: 47px;
}
nav ul li a {
    color: #F9F7F7;
    background-image: linear-gradient(to top, #ff6351, #ffcc6e);
    padding: 8px 22px 8px 22px;
    display: block;
    text-align: center;
    font-size: 22px;
    float: left;
    margin-right: 5px;
    color: rgb(255, 255, 255);
    background-color: rgb(120, 120, 120);
    text-shadow: rgb(79, 79, 79) 1px 1px 3px;
}
.Logo {
    margin: 15px;
}
#MainPage
{
background-color: white;    
}
.midText
{
text-align:center
}

.MainContent
{
  margin: 33px;
}

Answer 1

这会将横幅图像带到页面的中心。你要做的是添加图像的前面。

<section class="Banner ">
      <div class="container midText">
    <div class="col-md-12 text-center hidden-xs">
<center>
<img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive">
</center></div>
  </div>
    </section>

Answer 2

您应该利用列系统来帮助您的div居中。如果您知道引导行的宽度为12列宽，则需要一行= 12列。

因此...

<section>
  <div class="container">
<div class="row">
<div class="col-md-4"></div>
      <div class="col-md-4"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
      <div class="col-md-4"></div>
    </div>

现在你有4 | 4 | 4，但你也可以做3 | 6 | 3甚至2 | 8 | 2或1 | 10 | 1。这应该始终集中你的div。希望有所帮助。

如果我的笨拙没有意义，这里有漂亮的照片：http://getbootstrap.com/examples/grid/

Answer 3

由于你有许多断点，为什么不设置img的宽度（以像素为单位）？ img＆amp; amp;的纵横比包含div是不同的，因此它不能精确拟合。

display: block;
max-width: 1024px;
margin: 0px auto;
height: auto;

对于徽标......

<div class="col-md-12"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>

.Logo {
display: block;
margin: 15px auto;}

快速解决方案。

Bootstrap在容器中集中响应img

3 个答案: