CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Papa De Beau
Papa De Beau

Reputation: 3828

Bootstrap centering responsive img in container

I want my banner to be centered and the logo above the banner. But as you can see both the logo and banner and not centered. How can I fix this?

HERE IS LIVE VERSION: http://codepen.io/anon/pen/waYBxB

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

THE 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;
}

Upvotes: 0

Views: 128

Answers (3)

cab
cab

Reputation: 33

As you have a number of breakpoints, why not just set the width of the img in pixels? The aspect ratio of the img & the containing div are different, hence why it doesn't fit precisely.

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

For the logo...

<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;}

Quick solution for you.

Upvotes: 0

Christopher
Christopher

Reputation: 788

You should take advantage of the column system to help center your divs. If you know bootstrap rows are 12 column-widths wide, you need a row that = 12 columns.

So...

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

Now you have 4|4|4, but you could also do 3|6|3 or even 2|8|2 or 1|10|1. That should always center your divs. Hope that helped.

In case my mumbling makes no sense, here are pretty pictures with explenation: http://getbootstrap.com/examples/grid/

Upvotes: 1

Geeth Wijewickrama
Geeth Wijewickrama

Reputation: 31

this would bring the banner image to the center of the page. What you have to do is to add the infront of the image.

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

Upvotes: 1

Related Questions