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

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

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

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

HTML5

<!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

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

.heder {
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
}

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

igorkz, Спасибо

@error777 · 17.04.2017, 23:00

CSS

.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

.heder{
  text-align:center;
}
.menu{
  display: inline-block;
}

2.

CSS

.heder{
  text-align:center;
}
ul{
  display: inline-block;
}

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

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

@error777 88 / 10 / 2 Регистрация: 07.02.2009 Сообщений: 226
	17.04.2017, 23:09	6
	Сообщение от mrtoxas Выделить код ul{ * text-align:center; } У меня так не становится, я это в первую очередь пробывал. Тут не текст, а блок надо равнять. P.S. Почему все пользуются тегами <div> и не пользуются тегами <header> <footer> <articl> <aside>... Добавлено через 5 минут mrtoxas, А не работает. Я li равнял, а не ul 0

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

Решение