Question

我试图将屏幕小于600px时具有相对位置的div居中，然后转移到下拉列表（这就是我想要居中的位置）。

我尝试过margin: 0 auto;，但它似乎无法发挥作用。

可以在http://www.bootply.com/S5hjublwBF

找到该代码

帮助！

更新：

当它下降时，它还会在下面的文字中显示下划线。

更新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。

Answer 1

你是绝对的位置。要使其以小尺寸居中，请使用以下css .navYo ul。

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

Answer 2

你几乎做对了!! 只需添加

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

由于navYo中的ul处于绝对位置，因此不会占用容器的整个宽度。

margin: 0 auto;只有在你有宽度的情况下才能工作。

Answer 3

如果它是带有“#navIt”id的div，那么是margin: 0 auto将不起作用。这是因为div的宽度值为0. div中的UL位置是绝对的，这意味着不会根据所包含的UL的宽度计算父级宽度。不确定为什么你的UL位置是绝对的，但如果你把它改为亲戚，你会注意到父母将使用margin: 0 auto

将相对div置于Bootstrap中的窗口中心

3 个答案: