ヘッダーが中央に配置されていません

まだデバイスサイズにしましたが、ヘッダーの途中でヘッダーリンクを取得しようとしていますが、左側に浮動していて、なぜ私は入力を取って、私の悪いコードを言い訳しますか？私はこのことを初めて知りました。助けてください。ヘッダーが中央に配置されていません

* { 
 
    margin: 0px; 
 
} 
 
div#left_container { 
 
    float: left; 
 
    height: 10000px; 
 
    width: 18%; 
 
    background-color: #FDFDFD; 
 
} 
 
div#main_container { 
 
    float: left; 
 
    height: 10000px; 
 
    width: 64%; 
 
} 
 
div#right_container { 
 
    float: left; 
 
    height: 10000px; 
 
    width: 18%; 
 
    background-color: #FDFDFD; 
 
} 
 
div#header_bottom { 
 
    height: 60px; 
 
    width: auto; 
 
    margin: 0 10px 0 10px; 
 
    background-color: #8F7E7E; 
 
    opacity: 0.45; 
 
} 
 
div#header_bottom ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div#header_bottom li a { 
 
    display: inline; 
 
    width: 60px; 
 
    text-decoration: none; 
 
    padding: 8px 16px; 
 
} 
 
div#header_bottom li { 
 
    float: left; 
 
    text-align: center; 
 
    font-family: century gothic; 
 
    font-size: 45px; 
 
    text-align: -webkit-center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Mazig Grooms</title> 
 
</head> 
 

 
<body> 
 
    <div id="left_container"> 
 

 
    </div> 
 

 
    <div id="main_container"> 
 
    <div align="center" id="header_top"> 
 
     <img alt="logo" width="175" src="logo.png"> 
 
    </div> 
 
    <div align="center" id="header_bottom"> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="">Home</a> 
 
      </li> 
 
      <li><a href="">Times</a> 
 
      </li> 
 
      <li><a href="">Contact Us</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 

 
    </div> 
 

 
    </div> 
 

 
    <div id="right_container"> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

してください。

出典

2016-10-31 Ben McIlveen

基本的に、ヘッダーテキストのアイテムには 'float：left'があり、' text-align'を使って整列することはできません。重複した質問で提案された解決法は、代わりに 'display：inline-block'とすることを提案しました。 – Serlite

thisチュートリアルに従うことができます。

しかし、私は強くお勧めしますflex。浮動要素の親へ

セット：

ul { 
    display: flex; 
    display: -webkit-flex; 
    justify-content: center; // or space-around 
    -webkit-justify-content: center; 
}

すべてです！すべての子供は親の中心に置かれます。

出典

2016-10-31 20:36:39 user1201917

ヘッダーが中央に配置されていません

答えて

関連する問題