헤더가 가운데에 맞춰지지 않고 있습니다.

아직 장치 크기에 맞게 만들었지 만 헤더의 중간 부분에서 헤더 링크를 얻으려고 시도하고 있습니다. 그러나 왼쪽으로 뜨고 센터 텍스트가 작동하지 않는 것 같습니다. 왜 그런지 알 수 없으므로 입력을 받아 들여 나쁜 코드를 용서할 것입니다.헤더가 가운데에 맞춰지지 않고 있습니다.

* { 
 
    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

기본적으로 헤더 텍스트의 항목에는'text-align'을 사용하여 정렬 할 수없는'float : left'가 있습니다. 중복 된 질문에서 제안 된 해결책은 대신 그것을'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

헤더가 가운데에 맞춰지지 않고 있습니다.

답변

관련 문제