如何在CSS中垂直居中导航栏链接在UL标签中？

huangapple
go评论125阅读模式
英文:

How to vertically center navbar link in UL tag in CSS?

问题

Sure, here's the translated code part:

#nav_link {
  background: orange;
  display: flex;
  justify-content: center;
  outline: 2px solid white;
  margin-top: 30px;
  width: 12%;
  height: 15rem;
}

#nav_link li {
  display: table;
  text-align: center;
  font-size: 20px;
}

And the translated HTML part:

<nav>
  <div id="nav_link">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Pricing</a></li>
    </ul>
  </div>
</nav>

If you have any further questions or need additional translations, feel free to ask.

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#nav_link {
  background: orange;
  display: flex;
  justify-content: center;
  outline: 2px solid white;
  margin-top: 30px;
  width: 12%;
  height: 15rem;
}

#nav_link li {
  display: table;
  text-align: center;
  font-size: 20px;
}

<!-- language: lang-html -->

&lt;nav&gt;
  &lt;div id=&quot;nav_link&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;home.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;

<!-- end snippet -->

How to anchor tag inside a li in ul tag in CSS
i centered ul in div tag but how to vertically center li in ul tag.

答案1

得分: 1

ul的内边距影响了设计。
包括 nav_link ul

#nav_link {
  background: orange;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 2px solid white;
  margin-top: 30px;
  width: 20%;
  height: 15rem;
}
#nav_link ul {
  padding:0;
}

#nav_link li {
  display: table;
  text-align: center;
  font-size: 20px;
}

<nav>
  <div id="nav_link">
    <ul>
      <li><a href="home.html">主页</a></li>
      <li><a href="">关于</a></li>
      <li><a href="">联系我们</a></li>
      <li><a href="">服务</a></li>
      <li><a href="">定价</a></li>
    </ul>
  </div>
</nav>
英文:

The padding of ul is messing with the design
Include the nav_link ul
<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

#nav_link {
  background: orange;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 2px solid white;
  margin-top: 30px;
  width: 20%;
  height: 15rem;
}
#nav_link ul {
  padding:0;
}

#nav_link li {
  display: table;
  text-align: center;
  font-size: 20px;
}

<!-- language: lang-html -->

&lt;nav&gt;
  &lt;div id=&quot;nav_link&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;home.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;

<!-- end snippet -->

答案2

得分: 1

为了在<ul>标签内垂直居中导航链接，您可以使用CSS flexbox以及align-items: center属性。以下是您的CSS代码的更新版本：

<!DOCTYPE html>
<html>
<head>
<style>
#nav_link {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center; /* 添加的属性 */
  outline: 2px solid white;
  margin-top: 30px;
  width: 37%;
  height: 15rem;
}

#nav_link li {
  display: table;
  text-align: center;
  font-size: 20px;
}
</style>
</head>
<body>
<nav>
  <div id="nav_link">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Pricing</a></li>
    </ul>
  </div>
</nav>
</body>
</html>
英文:

To vertically center the navbar links within the <ul> tag, you can use CSS flexbox along with the align-items: center property. Here's an updated version of your CSS code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#nav_link {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center; /* Added property */
  outline: 2px solid white;
  margin-top: 30px;
  width: 37%;
  height: 15rem;
}

#nav_link li {
  display: table;
  text-align: center;
  font-size: 20px;
}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;nav&gt;
  &lt;div id=&quot;nav_link&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;home.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;

&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

答案3

得分: -1

以下是您要翻译的内容：

#nav_link { background: orange; display: flex; justify-content: center; outline: 2px solid white; margin-top: 30px; width: 50%; height: 15rem; align-items: center; } #nav_link ul{ padding: 0px; text-align: center; } #nav_link li {
list-style: none; text-align: center; font-size: 20px; }

<nav>
  <div id="nav_link">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Pricing</a></li>
    </ul>
  </div>
</nav>
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#nav_link { background: orange; display: flex; justify-content: center; outline: 2px solid white; margin-top: 30px; width: 50%; height: 15rem; align-items: center; } #nav_link ul{ padding: 0px; text-align: center; } #nav_link li {
list-style: none; text-align: center; font-size: 20px; }

<!-- language: lang-html -->

&lt;nav&gt;
  &lt;div id=&quot;nav_link&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;home.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月8日 20:17:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/76431791.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定