Почему мои ссылки не расположены по центру под моим изображением?

#html

#HTML

Вопрос:

Кто-нибудь может сказать мне, почему мои ссылки не центрируются под моим изображением? Тег center работал для моего изображения, но не для ссылок. есть какие-либо подсказки, почему? Это меня немного смущает.

 <!DOCTYPE html>
<html>



<head>


      <title>PEllisFitness</title>

      <link href="feel.css" rel="stylesheet" type="text/css" />

   </head>



<body background="wayback.jpg">
      <header>
         <center><img src="Fitness Logo.jpg" alt="Fitness Logo" align="middle" style="border:5px solid black"/></center>

      </header>

      <center>
      <nav>
         <ul>
            <li><a href="Home.html">Home</a></li>
            <li><a href="Diet.html">Diet Plans</a></li>
            <li><a href="Mass.html">Mass Guide</a></li>
            <li><a href="Cutting.html">Cuttin Guide</a></li>
            <li><a href="About.html">About Me</a></li>
            <li><a href="Contact.html">Contact Info</a></li>
         </ul>
      </nav>

      </center>

   </body>

</html>

1. … откуда у вас возникла идея использовать <center> тег? Это очень устаревшее . Вы начинаете работу с каким-либо конкретным учебным пособием или учебным материалом?

2. Нет, я на самом деле работаю над своим окончательным ага

Ответ №1:

Для этого вы должны использовать CSS.
<center> Тег устарел.
На данный момент вы центрируете весь список, а не элементы списка, что может вызвать проблему. Итак, если вы хотите, чтобы ваши ссылки были центрированы, вам нужно обернуть каждую <li> из них внутри a <center> . Надеюсь, это поможет.

Лучшим решением было бы добавить CSS в <ul> . Измените его на

 <ul style="display: flex; flex-direction: column; align-items: center;">

Это сделает список CSS-Flexbox с дочерними элементами, отображаемыми в столбце и центрированными.

1. я сделал это в css, и это не сработало li{ text-align:center; }

2. @phillipswag выравнивание текста выравнивает текст только внутри одного элемента или элементов, которые отображаются как inline , inline-block или другого текстового типа отображения. Поэтому здесь это не может работать.

Ответ №2:

Вы пробовали использовать таблицу вместо списка? Вы можете поместить ссылки в таблицу, центрировать таблицу и центрировать текст в таблице.

1. Использование таблиц для форматирования работает достаточно часто, но на самом деле его следует избегать, поскольку таблицы следует использовать для представления данных, а не для форматирования веб-страниц

Ответ №3:

Используйте стиль ниже в своем теге UL для выравнивания по центру

 <ul class="centerNavList">

 <style>
.centerNavList {
    margin: auto;
    width: 50%;
    padding: 12px;
}
</style>

Ответ №4:

Вам не нужно использовать центральный тег только потому, что иногда он работает неправильно.Но пользовательский css никогда не искажается 😉 . надеюсь, это поможет

 ul{
position:relative;
display: inline-block;  
list-style: none;
width:100%;
text-align: center;
margin: auto;
padding: 0;
}

смотрите Скрипку
в центре скрипки