Maxim Velichkin Maxim Velichkin - 3 months ago 21
Sass (Sass) Question

How can I center div, inside other div with bootstrap classes?

I'm working on a responsive web page using Bootstrap and SASS.

How can I center the maintext div and Logo, when the screen has smaller size? I've tried a variety of options, such as:

@media (max-width: 750px) {

#maintext {
margin-left: 0;
margin-right: 0;

}
}


I also tried to place maintext div inside another div centerhelper, and to do so:

@media (max-width: 750px) {
.centerhelper {
left: 50%;
border: solid blue 2px;
}

#maintext {
left: -50%;

}
}


But the height of the centerhelper div was equal to zero, I tried different "display" CSS for the centerhelper div and maintext div, but did not succeed.

Here is my HTML code:

<!-- NAVIGATION TOP -->
<nav class="navbar my-navbar navbar-inverse">
<div class="container">
<div class="navbar-header">

<!-- LOGO -->
<a href="#" class="my-logo pull-left"><img src="img/Logo.png"></a>
<!-- LOGO -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>
<div id="navbar" class="collapse navbar-collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="#"><button class="navbutton active">Home</button></a></li>
<li><a href="#"><button class="navbutton">About</button></a></li>
<li><a href="#"><button class="navbutton">Services</button></a></li>
<li><a href="#"><button class="navbutton">Portfolio</button></a></li>
<li><a href="#"><button class="navbutton">Blog</button></a></li>
<li><a href="#"><button class="navbutton lastbutton">Contact</button></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<!-- NAVIGATION TOP END -->
<!-- SHOWCASE -->
<section class="showcase">
<div class="container showcase-content">

<!-- MAINTEXT DIV -->
<div class="centerhelp"> <div id="maintext" ></div></div>
<!-- MAINTEXT DIV -->
</div>
</section>
<!-- SHOWCASE END -->


And CSS:

.showcase {

background-image: url(...);
height: 380px;
width: 100%;

#maintext {
padding: 0px;
display: inline-block;
float: left;

margin-top: 91px;
width: 430px;

h1 {
padding: 0;
margin: 0;
}
p {
padding: 0;
margin: 0;
}
}

Answer

Here you have a working jsfiddle of your example

@media (max-width: 1000px) {
    .centerhelper {
        left: 50%;
        border: solid blue 2px;
     }
     div#maintext {
       text-align: center;
     }
     .navbar-header{
       text-align: center;
     }
    .pull-left{
      float:none!important;
    }
}
Comments