Question

任何人都可以告诉我为什么我的链接不是以我的形象为中心？中心标签适用于我的图像但不是链接任何线索为什么？这让我很烦恼。

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

Answer 1

你应该使用 CSS 不推荐使用<center>代码目前，您将整个列表居中，而不是列表项，这可能会导致问题。因此，如果您希望链接居中，则需要将每个<li>包裹在<center>内。希望这可以帮助。

更好的解决方案是将{CSS添加到<ul>。将其更改为

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

这将使列表成为CSS-Flexbox，其中子元素显示在列中并居中。

Answer 2

您是否尝试使用表而不是列表？您可以将链接放在表格中，使表格居中，并将文本居中放在表格中。

Answer 3

在UL标签处使用以下样式进行居中对齐

<ul class="centerNavList">

和

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

Answer 4

您不必使用中心标记只是因为有时候无法正常工作。但是自定义css永远不会被打败;）。希望它有所帮助

看到小提琴 center Fiddle

为什么我的链接不是以我的形象为中心？

4 个答案: