html - Bootstrap centering responsive img in container -
i want banner centered , logo above banner. can see both logo , banner , not centered. how can fix this?
here 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 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 easy!</h3><br> notice how white centered image , logo not. how fix this? </div> <div class="col-md-2">i in banner section </div> </div> </div> </section> </body> </html> <!-- latest compiled , 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 , 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 { 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; }
this bring banner image center of page. have add infront of 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>
Comments
Post a Comment