I create a responsive page using Bootstrap and SASS.

Faced a problem - it’s impossible to center the maintext div and logo while reducing the screen size. Tried the most different options with margin, left, right, clear, float, display, position, etc. Something like this for example:

@media (max-width: 750px) { #maintext { margin-left: 0; margin-right: 0; } }

I also tried to wrap the maintext div into another div (centerhelper) and set the parent div 50% and maintext left: -50%, like this:

 @media (max-width: 750px) { .centerhelper { left: 50%; } #maintext { left: -50%; } }

But the height of the centerhelper div was zero, experimenting with different display and position options, but it was not possible to make the parent div a height with a div-descendant.

Here is my HTML:

  <!-- 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; } } .my-logo { position: absolute; margin-top: 15px; } img { width: 105px; height: auto; }

Perhaps some kind of problem with cascading CSS rules, which I still can not understand. I would be grateful for the advice on how to center the maintext div and Logo (link with the image inside).

  • Please format the question according to the help page telling you how to create a minimal reproducible example - VenZell
  • @VenZell is higher than HTML and CSS, all that is needed is the connection of bootstrap and working links to the images - Rumata
  • You see, you yourself know what is missing. Please facilitate the work of the respondents. Let at least be a normal example. - VenZell
  • I do not understand what result you want to achieve. Centering the div isn't hard, but do you really need it? - Andrew B
  • @AndrewB Yes, I just need to center the div. With the logo has already happened, with a diva with the text for some reason not, trying to understand. - Rumata

2 answers 2

See if this jsfiddle option is right for you . Change the width of the preview window to see what happens.

 <!-- NAVIGATION TOP --> <nav class="navbar my-navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <!-- LOGO --> <a href="#" class="navbar-brand"><img src="https://placehold.it/20x20" class="center-block"></a> <!-- LOGO --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <!-- NAVIGATION TOP END --> <!-- SHOWCASE --> <section class="container"> <div class="row"> <div class="col-xs-offset-3 col-xs-6"> <div class="maintext">Some text</div> </div> </div> <div class="maintext2">Some text</div> <div class="maintext3">Some text</div> </section> <!-- SHOWCASE END --> @media(max-width: 768px) { .navbar-brand { display: block; float: none; } .navbar-header { position: relative; } .navbar-header > button { position: absolute; top: 8px; right: 15px; margin: 0; } } .maintext, .maintext2, .maintext3 { height: 100px; background-color: #eee; margin-bottom: 20px; padding: 5px; } .maintext2 { width: 200px; margin-left: auto; margin-right: auto; } .maintext3 { text-align: center; }

Everything wrapped in @media refers to centering the logo for display on the mobile. Next 3 div blocks (gray background just for clarity). The first one is made with the help of offset, the second one with a strictly specified width and auto-centering, the third one has a width of 100% (the text is centered).

To display on different screen sizes you need to adjust for your task.

    Do you need to center only horizontally, or vertically too? There is a separate conversation with the vertical, and horizontally centered simply:

    1. Remove all float and inline / inline-block from the block;
    2. max-width: 430px; Only max-width, because on mobile you will have a smaller width;
    3. width: 100%; Let the mobile unit occupy the entire width;
    4. margin: 0 auto; Horizontal margins are set to auto, thereby aligning the block in the center.
    • Thanks, I will try. I need time to test everything and deal with the layering of CSS, as soon as I write it. - Rumata