私のメニューを中心に

私はメニューを作っていますが、今はそれをセンタリングしようとしています。私のメニューを中心に

私はクラス.navigation ulをdisplay:blockに与えてからmargin:0 autoとすることでこれをやります。

何らかの理由でこれが機能していません。

あなたがここに住ん例

2017-02-15 Kevin.a

だけで簡単に見つけることができます。あなたは子要素を中心に.navigation ulにtext-align: center;を与えるべき.navigation

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
/*Navigation section*/ 
 

 
.navigation { 
 
    width: 100%; 
 
    margin-top: 100px; 
 
    position: absolute; 
 
    background: transparent; 
 
    z-index: 1; 
 
    background: red; 
 
    display: flex; 
 
} 
 
.navigation ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
.navigation ul li { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.navigation li img { 
 
    width: 100px; 
 
    height: 100px; 
 
    z-index: 2; 
 
} 
 
/*The slider*/ 
 

 
.slick-slide { 
 
    width: 100%; 
 
    height: 100vh!important; 
 
} 
 
.slide img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<body> 
 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a>Home</a> 
 
     </li> 
 
     <li><a>About me</a> 
 
     </li> 
 
     <li> 
 
     <img src="http://phoenixsociety.com/img/phoenix-logo-k.png"> 
 
     </li> 
 
     <li><a>Home</a> 
 
     </li> 
 
     <li><a>About me</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- <div class ="logo"><img src="http://phoenixsociety.com/img/phoenix-logo-k.png"></div> --> 
 

 
    <!-- Bootstrap js --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <!-- custom js --> 
 
    <script src="js/custom.js"></script> 
 
</body>

出典

2017-02-15 10:02:33

おかげで、私は、左からメニューを中心意味します。メニュー全体が左揃えになっています。中央にこれを置いておきます。 –

@ Kevin.a ok。私は私の答えを変える。 '.navigation'に' display：flex'を使います。 –

'display：flex'の目的は、OPがここで達成しようとするものではありません。それはハンマーでキャンディーを打つようなものだ。単純な 'text-align'がその仕事をするべきです。 :) – nashcheez

ためdisplay: flexを追加しました。

はコード参照してください：

/*Navigation section*/ 
 

 
.navigation { 
 
    width: 100%; 
 
    margin-top: 100px; 
 
    position: absolute; 
 
    background: transparent; 
 
    z-index: 1; 
 
    background: red; 
 
} 
 
.navigation ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    display: block; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.navigation ul li { 
 
    display: inline-block; 
 
} 
 
.navigation li img { 
 
    width: 100px; 
 
    height: 100px; 
 
    z-index: 2; 
 
} 
 
/*The slider*/ 
 

 
.slick-slide { 
 
    width: 100%; 
 
    height: 100vh!important; 
 
} 
 
.slide img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<body> 
 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a>Home</a> 
 
     </li> 
 
     <li><a>About me</a> 
 
     </li> 
 
     <li> 
 
     <img src="http://phoenixsociety.com/img/phoenix-logo-k.png"> 
 
     </li> 
 
     <li><a>Home</a> 
 
     </li> 
 
     <li><a>About me</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- <div class ="logo"><img src="http://phoenixsociety.com/img/phoenix-logo-k.png"></div> --> 
 

 
    <!-- Bootstrap js --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <!-- custom js --> 
 
    <script src="js/custom.js"></script> 
 
</body>

出典

2017-02-15 10:16:49 nashcheez

私のメニューを中心に

答えて

関連する問題