在Bootstrap中将一个相对div居中置于窗口

我想将屏幕小于600px时具有相对位置的div居中，它将转换为下拉（这正是我想要的）。在Bootstrap中将一个相对div居中置于窗口

我试过做margin: 0 auto;，但它似乎没有工作。

的代码可以在http://www.bootply.com/S5hjublwBF

帮助找到！

更新：

而且它也低于它的文本underlaps时滴下来。

更新2：

HTML

<div class="container"> 
     <div class="row"> 
      <div class="logo col-md-3 col-sm-3"><img class="img-responsive" src="http://lorempixel.com/200/120/people"></div> 
      <div class="header-account col-md-4 col-sm-8"> 
       <div id="navIt" class="navYo"> 
        <ul> 
         <li class="current"><a href="#">My Account</a></li> 
         <li><a href="#">My Wishlist</a></li> 
         <li><a href="#">Login/Logout</a></li> 
        </ul> 
       </div> 
      </div> 
      <div class="header-cart col-md-4 col-sm-5"> 
       <p>Shopping Cart <a href="#">1 Item(s)</a> - $123 </p> 
      </div> 
     </div> 
    </div>

CSS

/* nav */ 
.navYo { 
    position: relative; 
    margin: 20px 0; 
} 
.navYo ul { 
    margin: 0; 
    padding: 0; 
} 
.navYo li { 
    margin: 0 5px 10px 0; 
    padding: 0; 
    list-style: none; 
    display: inline-block; 
} 
.navYo a { 
    padding: 3px 12px; 
    text-decoration: none; 
    color: #999; 
    line-height: 100%; 
} 
.navYo a:hover { 
    color: #000; 
} 
.navYo .current a { 
    background: #999; 
    color: #fff; 
    border-radius: 5px; 
} 

/* right nav */ 
.navYo.right ul { 
    text-align: right; 
} 

/* center nav */ 
.navYo.center ul { 
    text-align: center; 
} 
@media screen and (max-width: 600px) { 

    .navYo { 
     position: relative; 
     min-height: 40px; 
    } 
    .navYo ul { 

     width: 180px; 
     padding: 5px 0; 
     position: absolute; 
     top: 0; 
     left: 0; 
     border: solid 1px #aaa; 
     /*content: "\f0c9";*/ 
     background: #fff no-repeat 10px 11px; 
     border-radius: 5px; 
     box-shadow: 0 1px 2px rgba(0,0,0,.3); 
    } 
    .navYo ul:before{ 
     content: "\f0c9"; 
     color: #0f0f0f; 
     font-family: FontAwesome; 
     left:3px; 
     position:absolute; 
     top: 7px; 
    } 
    .navYo li { 
     display: none; /* hide all <li> items */ 
     margin: 0; 
    } 
    .navYo .current { 
     display: block; /* show only current <li> item */ 
    } 
    .navYo a { 
     display: block; 
     padding: 5px 5px 5px 32px; 
     text-align: left; 
    } 
    .navYo .current a { 
     background: none; 
     color: #666; 
    } 

    /* on nav hover */ 
    /*.nav ul:active {*/ 
     /*background-image: none;*/ 
    /*}*/ 
    /*.nav ul:active li {*/ 
     /*display: block;*/ 
     /*margin: 0 0 5px;*/ 
    /*}*/ 
    /*.nav ul:active .current {*/ 
     /*background: url(images/icon-check.png) no-repeat 10px 7px;*/ 
    /*}*/ 

    /* right nav */ 
    .navYo.right ul { 
     left: auto; 
     right: 0; 
    } 

    /* center nav */ 
    .navYo.center ul { 
     left: 50%; 
     margin-left: -90px; 
    } 

} 

@media screen and (max-width: 600px) { 
    /*on click hover */ 

    .drop ul { 
     background-image: none; 
    } 

    .drop ul li { 
     display: block; 
     margin: 0 0 5px; 

    } 

    .drop ul .current { 
     background: url(images/icon-check.png) no-repeat 10px 7px; 

    } 
} 

.header-account{ 
    text-align: center; 
    } 
.header-cart{ 
     text-align: center; 
    }

更新3

这是为类navYo。

来源

2016-03-03 Akshay

务必在问题本身中发布相关代码。 –

什么div？针对你的问题进行具体说明，以便有人能够帮助你。 –

我已添加代码 – Akshay

你ul是绝对位置。为了使它在小尺寸中心使用以下css到.navYo ul。

.navYo ul{ 
    left: 50%; 
    transform: translate(-50%); 
}

来源

2016-03-03 05:59:17 ketan

正是！这工作。非常感谢。 – Akshay

如果是带“#navIt”id的div，那么是margin: 0 auto将不起作用。这是因为div的宽度值为0. div中的UL位置是绝对的，这意味着父宽度将不会与包含UL的宽度一起计算。不知道为什么你绝对让UL的位置，但如果你改变它的亲戚，你会注意到，父母将中心使用margin: 0 auto

来源

2016-03-03 06:01:42 IColorfield

你几乎是正确的！只需添加

.navYo{ 
    width: 180px; 
    margin: 0 auto; 
}

正如navYo ul是处绝对位置也不会花容器的整个宽度。

还margin: 0 auto;只有在给予宽度的情况下才有效。

来源

2016-03-03 06:04:07

这可以工作，但如果屏幕尺寸小于440，那么它不会居中。 – Akshay

在Bootstrap中将一个相对div居中置于窗口

回答

相关问题