Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 28.09.2019
Сообщений: 34
1

Не получается выровнять заголовки по центру

16.12.2019, 21:04. Показов 1090. Ответов 3

Добрый день. Делаю сайт, курсовая работа. Не могу выровнять в блоке nav блоки li по центру. text-align по центру не помогает. Спасите.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
body{ background-color: #666666;}
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <title>Главная</title>
</head>
   
   <body>
        
         <div class="logo">
             <a href="index.html"><img class="graficlogo" src="assets/images/3d-logo.jpg" alt="logo id="anc></a>
         </div>
         
       <header>
                  <nav>
                      <ul>
                          <li><a href="#">Главная</a></li>
                          <li><a href="#">Основные понятия</a>
                          <li><a href="#">Карта сайта</a></li>
                          <li><a href="#">Об авторе</a></li>
                      </ul>
                  </nav>
       </header>
           
           <div class="content">
                <h2>Технологии реализации 3D графики при разработке компьютерных игр - обзор.</h2>
                    <p>
                     В своем обзоре «Технологии реализации 3D графики при разработке компьютерных игр», я постараюсь объяснить на простых примерах из игровой индустрии, к каким решениям приходят игровые разработчики, чтобы внедрить в свои проекты передовые технологии реализации трехмерной графики. Что представляют из себя данные технологии и каких усилий стоит внедрение последних самых передовых технологий 3D графики в свои проекты разработчикам. 
                    </p>    
           </div>
           
           <footer>
               <div>
                   <h3>О сайте</h3>
                   <p>
                       Сайт создавался как справочный материал, по заказу Федерального Государственного Бюджетного Образовательного Учреждения Высшего Образования <a href="http://www.istu.edu/">«Пупкинский национальный исследовательский технический университет» </a> для обзора технологий реализации 3d графики при разработке компьютерных игр.
                   </p>
                              
                   <div class="copyright">
                         &copy; 2019г. Пупкин Владислав Викторович <a href="пупкин@gmail.com">пупкин@gmail.com</a>
                   </div>
               </div>
           </footer>
   </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
img {
    display:block;
    margin:auto;
}
 
.content {
    margin-left: 15%;
    margin-right: 15%;
    padding: 28px;
    background: #ffffff;
    border-bottom: solid 1px #ffffff;
    box-shadow: 0 0 10px;
}
 
footer {
    margin-left: 15%;
    margin-right: 15%;
    padding-top: 25px;
    text-align: center;
    color: #d3d3d3;
}
 
footer a{
    color: #eee;
    text-decoration: none;
}
 
footer a:hover{
    color: white;
    text-decoration: underline;
}
 
nav{
    font-size: 1.2em;
    margin-right: 15%;
    margin-left: 15%; 
    margin-top: 20px;
    margin-bottom: 25px;
    height: 77px;
    background-color: #373737;
}
 
 
nav ul {
  list-style: none;
}
 
nav li {
    float:left;
    text-align: center;
    width: 20%;
}
 
nav a {
    display: block;
    color: white;
    padding: 1.5em;
    text-decoration: none;
    border-radius:4px; закругление блоков
    border-right: 1px solid #BAD78B; Могут пригодиться
    -moz-transition: all 0.3s 0.01s ease;
    -o-transition: all 0.3s 0.01s ease;
    -webkit-transition: all 0.3s 0.01s ease;
}
 
nav a:hover {
    color: white;
    background: #504949;
}
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
16.12.2019, 21:04
Ответы с готовыми решениями:

Выровнять заголовки столбцов DBGrid по центру
Уважаемые программисты, как в сделать чтобы в DBGrid1 названия полей были по центру, а данные...

Выровнять заголовки
Как выровнять заголовок(первый рисунок) в втором блоке(отмечено красным), чтобы он был на уровне...

Выровнять заголовки по линии
Здравствуйте. Никак не получается с помощью css выровнять заголовки по линии. Как видим на сайте,...

Выровнять по центру
Привет всем. Нужно выровнять блок со словами по центру , но не могу понять как это сделать ,...

3
154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351
16.12.2019, 21:35 2
Лучший ответ Сообщение было отмечено What_is_Vladik как решение

Решение

nav li { float:left; } - флоаты условие курсовой?
text-align на такие элементы не действует, они выпадают из общего потока документа
Вместо флоатов лучше используйте флексы:
CSS
1
2
3
4
5
nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
}
1
0 / 0 / 0
Регистрация: 28.09.2019
Сообщений: 34
16.12.2019, 21:41  [ТС] 3
Цитата Сообщение от galawar Посмотреть сообщение
флоаты условие курсовой?
- Нет, просто так получилось реализовать горизонтальный список. Спасибо большое! Заробило.
0
154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351
16.12.2019, 21:48 4
Цитата Сообщение от What_is_Vladik Посмотреть сообщение
- Нет, просто так получилось реализовать горизонтальный список.
Забудьте про позиционирование элементов с помощью флоатов, они не для этих целей разрабатывались.
Почитайте на досуге что такое флексы: https://developer.mozilla.org/... ut/Flexbox
и гриды: https://developer.mozilla.org/... rid_Layout
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.12.2019, 21:48

Выровнять ul по центру
Всем привет. Прошу помощи в выравнивании горизонтального меню по центру. код меню &lt;ul...

Выровнять по центру
Выровнять Div по центру монитора но при этом чтобы они располагались по горизонтали &lt;table...

выровнять по центру
во есть код сранички &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;...

Выровнять текст по центру
Не могу выровнять текст по центу,подскажите как это сделать &lt;div id=&quot;header_bottom&quot;&gt; &lt;ul...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru