Andy Janssens Ответов: 1

Как мне центрировать свой список заголовков? (V2)

Я пытаюсь сделать заголовок с каким-то приличным css, и что-то было не так: Когда я тестировал это с помощью своего localhost (через XAMPP), список не центрировался в середине моего фона, а был выше.

Как я могу решить эту проблему?

С уважением,
Андреас


<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" type="text/css"href="header.css">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
          <li><a href="">Agenda</a></li>
          <li><a href="">Menu</a></li>
        <p>  Cafe <strong> Welkom</strong></p> <br>
        </ul>
        
    
    </header>    
</html>


Что я уже пробовал:

CSS:

заголовок
{
выравнивание текста: по центру;
список-стиль положение: снаружи;

}
ул {
список-стиль-тип: нет;
маржа: 0;
заполнение: 0;
переполнения: скрытые;
цвет фона: #333;
}

ли {
поплавок: левый;

}

ли а {
размер шрифта: 15px;
дисплей: блок;
белый цвет;
выравнивание текста: по центру;
заполнение: 14px 16px;
текстовое оформление: нет;

}


ли а: Ховер {
цвет фона: темный хаки;
}
п
{
семейство шрифтов: sans-serif;
цвет: lightgoldenrodyellow;
}

Karthik_Mahalingam

опубликуйте его скриншот.

1 Ответов

Рейтинг:
0

jgakenhe

Я внес пару изменений. Во-первых, я убрал поля и отступы сверху, а также завернул заголовок в div под названием heading, чтобы получить 100% - ный эффект ширины, а затем центрировал то, что было li как div; так что он мог быть центрирован. Кроме того, p перемещается в li, так что он является частью неупорядоченного списка. Чтобы получить хороший шрифт,я завернул его в пядь.

* {
  margin: 0;
  padding: 0;
}
#header{width: 50%; margin-top: 0px;
  margin-left: auto;
  margin-right: auto;}

#heading{background: #333; width: 100%; height: 50px; margin-top: 0px;}

header
{
text-align: center;
list-style-position: outside;

}
ul  li{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;

}

li a {
font-size: 15px;
/*display: block;*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;

}


li a:hover {
background-color: darkkhaki;
}
span
{
font-family: sans-serif;
color: lightgoldenrodyellow;
} 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"href="header.css">
</head>
<body>
<div id="heading">
    <div id="header">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
          <li><a href="">Agenda</a></li>
          <li><a href="">Menu</a></li>
        <li><span>  Cafe <strong> Welkom</strong></span></li>
        </ul>
    </div>
</div>
<body>   
</html>