Выравнивание по центру

@Mafia50000 · Регистрация: 10.07.2016

Студворк — интернет-сервис помощи студентам

Я делаю меню для html страницы, но не как немого меню поставить по середине.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Достопримечательности России</title>
    </head>
    <body>
        <div class="class heder">
            
        <div class="class menu">
            <ul>
                <li><a href="#">Главная</a></li>
                <li class="calss"><a href="#">Достопрмеичательности</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="">Карта</a></li>
            <ul>
        </div>
        </div>
    </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
*{
    margin: 0;
    padding: 0;
}
 
body{
    background: #FFE4E1;
}
 
.heder{
 
}
 
.menu li{
    margin: 0 auto;
    text-align: center;
    padding-top: 3px;
    display: inline-block;
    margin-right: 3px;
    background: url(img/menu_fon.jpg);
}
.menu a{
    color: #fff;
    display: block;
    padding: 5px 15px;
    text-decoration: none;
}
 
.menu li:first-child, li.first-child{
    margin: 0 auto;
}

@igorkz · 17.04.2017, 22:55

CSS
1
2
3
4
5
.heder {
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
}

@Mafia50000 · 17.04.2017, 22:59 **[ТС]**

igorkz, Спасибо

@error777 · 17.04.2017, 23:00

CSS
1
2
3
4
5
.heder{
    position: absolute;
  
    left:30%;
}

@mrtoxas · 17.04.2017, 23:01

igorkz, error777, это жестко

Mafia50000,

CSS
1
2
3
ul{
  text-align:center;
}

@error777 · 17.04.2017, 23:09

Сообщение от mrtoxas

Выделить код

ul{
* text-align:center;
}

У меня так не становится, я это в первую очередь пробывал.
Тут не текст, а блок надо равнять.
P.S.
Почему все пользуются тегами <div> и не пользуются тегами <header> <footer> <articl> <aside>...

Добавлено через 5 минут
mrtoxas,
А не работает. Я li равнял, а не ul

@mrtoxas · 17.04.2017, 23:09

Сообщение от error777

Тут не текст, а блок надо равнять.

Но не трансформацией же или абсолютным позиционированием

1.

CSS
1
2
3
4
5
6
.heder{
  text-align:center;
}
.menu{
  display: inline-block;
}

2.

CSS
1
2
3
4
5
6
.heder{
  text-align:center;
}
ul{
  display: inline-block;
}

Можно, конечно для этого еще и bootstrap подключить

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@Mafia50000 0 / 0 / 2 Регистрация: 10.07.2016 Сообщений: 45
	17.04.2017, 22:59 [ТС]
	igorkz, Спасибо 0

Выравнивание по центру

Решение