Question

我正在使用Bootstrap和SASS在响应式网页上工作。

当屏幕尺寸较小时，如何将 maintext div 和徽标居中？我尝试了各种选项，例如：

@media (max-width: 750px) {

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

    }
}

我还尝试将 maintext div 放在另一个div centerhelper 中，并且这样做：

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

    #maintext {
     left: -50%;

    }
 }

但 centerhelper div 的高度等于零，我尝试了不同的＆＃34;显示＆＃34; centerhelper div 和 maintext div 的CSS，但未成功。

这是我的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 -->

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

在这里，您的示例<{3}}

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

Answer 2

为什么不试试这个，这将是所有屏幕尺寸的绝对中心。：）

＆＃13;

.popup{
  position:fixed;
  left:50%;
  
}
.popup .wrapper{
  position:relative; 
  left:-50%;
  
  /*popup-styles*/
  background-color:#fff;
  padding:10px;
  border:solid 2px #444;
  border-radius:10px;
}

html{background-color:#aaa;}

＆＃13;

<div class="popup">
  <div class="wrapper">
    
    
       <img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
         
         
    </div>
</div>

＆＃13;

如何在div中使用bootstrap类将div放在其他div中？

2 个答案: