1. 首頁
  2. 問答
  3. 以margin爲中心

以margin爲中心

2014-09-06 95 views
0

我想讓我的導航欄位於中心位置。試過這個：以margin爲中心

#menu { 
     position: relative; 
     height: 44px; 
     width: auto; 
     padding-left:165px; 
    }

但是，此代碼不適用於大屏幕或縮小。我已經試過

margin-left:auto; 
margin-right:auto;

這裏是

#menu { 
    position: relative; 
    height: 44px; 
    width: auto; 
    margin: 0px auto; 
} 
#menu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    line-height: 1; 
} 
#menu > ul { 
    position: relative; 
    display: block; 
    background: -moz-linear-gradient(#4F93EF, #1162CB); 
    background: -o-linear-gradient(#4F93EF, #1162CB); 
    background: -webkit-linear-gradient(#4F93EF, #1162CB); 
    /*border-radius: 15px 15px 0px 0px; 
    -moz-border-radius: 15px 15px 0px 0px; 
    -webkit-border: 15px 15px 0px 0px;*/ 
    width: 1020px; 
    z-index: 500; 
} 
#menu:after, 
#menu > ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#menu.align-right > ul > li { 
    float: right; 
} 
#menu.align-center ul { 
    text-align: center; 
} 
#menu.align-center ul ul { 
    text-align: left; 
} 
#menu > ul > li { 
    display: inline-block; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
#menu > ul > #menu-button { 
    display: none; 
} 
#menu ul li a { 
    display: block; 
    font-family:Geneva, Arial, Helvetica, sans-serif; 
    text-decoration: none; 
} 
#menu > ul > li > a { 
    font-size: 14px; 
    font-weight: bold; 
    padding: 15px 20px; 
    color: #ffffff; 
    text-transform: uppercase; 
    -webkit-transition: color 0.25s ease-out; 
    -moz-transition: color 0.25s ease-out; 
    -ms-transition: color 0.25s ease-out; 
    -o-transition: color 0.25s ease-out; 
    transition: color 0.25s ease-out; 
} 
#menu > ul > li.has-sub > a { 
    padding-right: 32px; 
} 
#menu > ul > li:hover > a { 
    color: #b6b6b6; 
} 
#menu li.has-sub::after { 
    display: block; 
    content: ""; 
    position: absolute; 
    width: 0; 
    height: 0; 
} 
#menu > ul > li.has-sub::after { 
    right: 15px; 
    top: 20px; 
    border: 5px solid transparent; 
    border-top-color: #ffffff; 
} 
#menu > ul > li:hover::after { 
    border-top-color: #b6b6b6; 
} 
#indicatorContainer { 
    position: absolute; 
    height: 12px; 
    width: 100%; 
    bottom: 0px; 
    overflow: hidden; 
    z-index: -1; 
} 
#pIndicator { 
    position: absolute; 
    height: 0; 
    width: 100%; 
    border: 12px solid transparent; 
    border-top-color: #0053a6; 
    z-index: -2; 
    -webkit-transition: left .25s ease; 
    -moz-transition: left .25s ease; 
    -ms-transition: left .25s ease; 
    -o-transition: left .25s ease; 
    transition: left .25s ease; 
} 
#cIndicator { 
    position: absolute; 
    height: 0; 
    width: 100%; 
    border: 12px solid transparent; 
    border-top-color: #0053a6; 
    top: -12px; 
    right: 100%; 
    z-index: -2; 
} 
#menu ul ul { 
    position: absolute; 
    left: -9999px; 
    top: 70px; 
    opacity: 0; 
    -webkit-transition: opacity .3s ease, top .25s ease; 
    -moz-transition: opacity .3s ease, top .25s ease; 
    -ms-transition: opacity .3s ease, top .25s ease; 
    -o-transition: opacity .3s ease, top .25s ease; 
    transition: opacity .3s ease, top .25s ease; 
    z-index: 1000; 
} 
#menu ul ul ul { 
    top: 37px; 
    padding-left: 5px; 
} 
#menu ul ul li { 
    position: relative; 
} 
#menu > ul > li:hover > ul { 
    left: auto; 
    top: 44px; 
    opacity: 1; 
} 
#menu.align-right > ul > li:hover > ul { 
    left: auto; 
    right: 0; 
    opacity: 1; 
} 
#menu ul ul li:hover > ul { 
    left: 190px; 
    top: 0; 
    opacity: 1; 
} 
#menu.align-right ul ul li:hover > ul { 
    left: auto; 
    right: 190px; 
    top: 0; 
    opacity: 1; 
    padding-right: 5px; 
} 
#menu ul ul li a { 
    width: 150px; /*ukuran kotak*/ 
    border-bottom: 1px solid #eeeeee; 
    padding: 10px 20px; 
    font-size: 12px; 
    font-weight:bold; 
    color: #ffffff; 
    background: #006ad4; 
    -webkit-transition: all .35s ease; 
    -moz-transition: all .35s ease; 
    -ms-transition: all .35s ease; 
    -o-transition: all .35s ease; 
    transition: all .35s ease; 
} 
#menu.align-right ul ul li a { 
    text-align: right; 
} 
#menu ul ul li:hover > a { 
    background: #0160bf; 
    color: #b6b6b6; 
} 
#menu ul ul li:last-child > a, 
#menu ul ul li.last > a { 
    border-bottom: 0; 
} 
#menu > ul > li > ul::after { 
    content: ''; 
    border: 6px solid transparent; 
    width: 0; 
    height: 0; 
    border-bottom-color: #b6b6b6; 
    position: absolute; 
    top: -12px; 
    left: 30px; 
} 
#menu.align-right > ul > li > ul::after { 
    left: auto; 
    right: 30px; 
} 
#menu ul ul li.has-sub::after { 
    border: 4px solid transparent; 
    border-left-color: #b6b6b6; 
    right: 10px; 
    top: 12px; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease; 
} 
#menu.align-right ul ul li.has-sub::after { 
    border-left-color: transparent; 
    border-right-color: #b6b6b6; 
    right: auto; 
    left: 10px; 
} 
#menu ul ul li.has-sub:hover::after { 
    border-left-color: #b6b6b6; 
    right: -5px; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
#menu.align-right ul ul li.has-sub:hover::after { 
    border-right-color: #b6b6b6; 
    border-left-color: transparent; 
    left: -5px; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { 
    #menu { 
    width: auto; 
    } 
    #menu.align-center ul { 
    text-align: left; 
    } 
    #menu.align-right > ul > li { 
    float: none; 
    } 
    #menu ul { 
    width: auto; 
    } 
    #menu .submenuArrow, 
    #menu #indicatorContainer { 
    display: none; 
    } 
    #menu > ul { 
    height: auto; 
    display: block; 
    } 
    #menu > ul > li { 
    float: none; 
    } 
    #menu li, 
    #menu > ul > li { 
    display: none; 
    } 
    #menu ul ul, 
    #menu ul ul ul, 
    #menu ul > li:hover > ul, 
    #menu ul ul > li:hover > ul, 
    #menu.align-right ul ul, 
    #menu.align-right ul ul ul, 
    #menu.align-right ul > li:hover > ul, 
    #menu.align-right ul ul > li:hover > ul { 
    position: relative; 
    left: auto; 
    top: auto; 
    opacity: 1; 
    padding-left: 0; 
    padding-right: 0; 
    right: auto; 
    } 
    #menu ul .has-sub::after { 
    display: none; 
    } 
    #menu ul li a { 
    padding: 12px 20px; 
    } 
    #menu ul ul li a { 
    border: 0; 
    background: none; 
    width: auto; 
    padding: 8px 35px; 
    } 
    #menu.align-right ul ul li a { 
    text-align: left; 
    } 
    #menu ul ul li:hover > a { 
    background: none; 
    color: #b6b6b6; 
    } 
    #menu ul ul ul a { 
    padding: 8px 50px; 
    } 
    #menu ul ul ul ul a { 
    padding: 8px 65px; 
    } 
    #menu ul ul ul ul ul a { 
    padding: 8px 80px; 
    } 
    #menu ul ul ul ul ul ul a { 
    padding: 8px 95px; 
    } 
    #menu > ul > #menu-button { 
    display: block; 
    cursor: pointer; 
    } 
    #menu #menu-button > a { 
    padding: 14px 20px; 
    } 
    #menu ul.open li, 
    #menu > ul.open > li { 
    display: block; 
    } 
    #menu > ul.open > li#menu-button > a { 
    color: #fff; 
    border-bottom: 1px solid rgba(150, 150, 150, 0.1); 
    } 
    #menu ul ul::after { 
    display: none; 
    } 
    #menu #menu-button::after { 
    display: block; 
    content: ''; 
    position: absolute; 
    height: 3px; 
    width: 22px; 
    border-top: 2px solid #ffffff; 
    border-bottom: 2px solid #ffffff; 
    right: 20px; 
    top: 15px; 
    } 
    #menu #menu-button::before { 
    display: block; 
    content: ''; 
    position: absolute; 
    height: 3px; 
    width: 22px; 
    border-top: 2px solid #ffffff; 
    right: 20px; 
    top: 25px; 
    } 
    #menu ul.open #menu-button::after, 
    #menu ul.open #menu-button::before { 
    border-color: #fff; 
    } 
}

我試過保證金左自動，保證金右汽車和保證金0px auto的 我全導航欄的代碼還不行，任何解決方案球員？

來源

2014-09-06 john

回答

2

需要修復父標籤的寬度並設置style =「margin：0px auto;」

來源

2014-09-06 07:37:24

+0

指定明確的「寬度」是關鍵。 – 2014-09-06 08:08:34

+0

仍然不起作用 – john 2014-09-06 08:17:01

+0

對不起，我的工作很好，謝謝 – john 2014-09-06 08:26:46

1

您使用的margin-left和margin-right是不正確，應該是：

margin-left:auto; 
margin-right:auto;

來源

2014-09-06 07:37:27 idmean

0

嘗試使用左，右，支持自動

#menu { 
     position: relative; 
     height: 44px; 
     width: auto; 
     margin-left:auto; 
     margin-right:auto; 
     float:none !important; 
    }

來源

2014-09-06 07:41:11

0

嘗試以下操作：

#menu { 
    position: relative; 
    height: 44px; 
    width: 500px; 
    right: 0; 
    left: 0; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: red; 
    color: white; 
    display: block; 
    }

PS：嘗試位置爲絕對或固定也代替相對。

來源

2014-09-06 10:54:17

相關問題

 相關問題