Заголовок не центрирован

Я до сих пор делал это до размеров устройства, но я пытался получить заголовки заголовков в середине заголовка, но они плавают влево, а центральный текст, похоже, не работает i ' я не могу понять, почему поэтому я буду принимать какие-либо материалы и извинить мой плохой код. Я новичок в этой вещи ... помогите.Заголовок не центрирован

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

Заголовок не центрирован

ответ

Смежные вопросы