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

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

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

问题

Sure, here's the translated code part:

  1. #nav_link {
  2.   background: orange;
  3.   display: flex;
  4.   justify-content: center;
  5.   outline: 2px solid white;
  6.   margin-top: 30px;
  7.   width: 12%;
  8.   height: 15rem;
  9. }
  11. #nav_link li {
  12.   display: table;
  13.   text-align: center;
  14.   font-size: 20px;
  15. }

And the translated HTML part:

  1. <nav>
  2.   <div id="nav_link">
  3.     <ul>
  4.       <li><a href="home.html">Home</a></li>
  5.       <li><a href="">About</a></li>
  6.       <li><a href="">Contact Us</a></li>
  7.       <li><a href="">Services</a></li>
  8.       <li><a href="">Pricing</a></li>
  9.     </ul>
  10.   </div>
  11. </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 -->

  1. #nav_link {
  2.   background: orange;
  3.   display: flex;
  4.   justify-content: center;
  5.   outline: 2px solid white;
  6.   margin-top: 30px;
  7.   width: 12%;
  8.   height: 15rem;
  9. }
  11. #nav_link li {
  12.   display: table;
  13.   text-align: center;
  14.   font-size: 20px;
  15. }

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

  1. &lt;nav&gt;
  2.   &lt;div id=&quot;nav_link&quot;&gt;
  3.     &lt;ul&gt;
  4.       &lt;li&gt;&lt;a href=&quot;home.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  5.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  6.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  7.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
  8.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
  9.     &lt;/ul&gt;
  10.   &lt;/div&gt;
  11. &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

  1. #nav_link {
  2.   background: orange;
  3.   display: flex;
  4.   align-items: center;
  5.   justify-content: center;
  6.   outline: 2px solid white;
  7.   margin-top: 30px;
  8.   width: 20%;
  9.   height: 15rem;
  10. }
  11. #nav_link ul {
  12.   padding:0;
  13. }
  15. #nav_link li {
  16.   display: table;
  17.   text-align: center;
  18.   font-size: 20px;
  19. }
  1. <nav>
  2.   <div id="nav_link">
  3.     <ul>
  4.       <li><a href="home.html">主页</a></li>
  5.       <li><a href="">关于</a></li>
  6.       <li><a href="">联系我们</a></li>
  7.       <li><a href="">服务</a></li>
  8.       <li><a href="">定价</a></li>
  9.     </ul>
  10.   </div>
  11. </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 -->

  1. #nav_link {
  2.   background: orange;
  3.   display: flex;
  4.   align-items: center;
  5.   justify-content: center;
  6.   outline: 2px solid white;
  7.   margin-top: 30px;
  8.   width: 20%;
  9.   height: 15rem;
  10. }
  11. #nav_link ul {
  12.   padding:0;
  13. }
  15. #nav_link li {
  16.   display: table;
  17.   text-align: center;
  18.   font-size: 20px;
  19. }

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

  1. &lt;nav&gt;
  2.   &lt;div id=&quot;nav_link&quot;&gt;
  3.     &lt;ul&gt;
  4.       &lt;li&gt;&lt;a href=&quot;home.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  5.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  6.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  7.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
  8.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
  9.     &lt;/ul&gt;
  10.   &lt;/div&gt;
  11. &lt;/nav&gt;

<!-- end snippet -->

答案2

得分: 1

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #nav_link {
  6.   background: orange;
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center; /* 添加的属性 */
  10.   outline: 2px solid white;
  11.   margin-top: 30px;
  12.   width: 37%;
  13.   height: 15rem;
  14. }
  16. #nav_link li {
  17.   display: table;
  18.   text-align: center;
  19.   font-size: 20px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <nav>
  25.   <div id="nav_link">
  26.     <ul>
  27.       <li><a href="home.html">Home</a></li>
  28.       <li><a href="">About</a></li>
  29.       <li><a href="">Contact Us</a></li>
  30.       <li><a href="">Services</a></li>
  31.       <li><a href="">Pricing</a></li>
  32.     </ul>
  33.   </div>
  34. </nav>
  35. </body>
  36. </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 -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;style&gt;
  5. #nav_link {
  6.   background: orange;
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center; /* Added property */
  10.   outline: 2px solid white;
  11.   margin-top: 30px;
  12.   width: 37%;
  13.   height: 15rem;
  14. }
  16. #nav_link li {
  17.   display: table;
  18.   text-align: center;
  19.   font-size: 20px;
  20. }
  22. &lt;/style&gt;
  24. &lt;/head&gt;
  25. &lt;body&gt;
  26. &lt;nav&gt;
  27.   &lt;div id=&quot;nav_link&quot;&gt;
  28.     &lt;ul&gt;
  29.       &lt;li&gt;&lt;a href=&quot;home.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  30.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  31.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  32.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
  33.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
  34.     &lt;/ul&gt;
  35.   &lt;/div&gt;
  36. &lt;/nav&gt;
  38. &lt;/body&gt;
  39. &lt;/html&gt;

<!-- end snippet -->

答案3

得分: -1

以下是您要翻译的内容：

  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 {
  2. list-style: none; text-align: center; font-size: 20px; }
  1. <nav>
  2.   <div id="nav_link">
  3.     <ul>
  4.       <li><a href="home.html">Home</a></li>
  5.       <li><a href="">About</a></li>
  6.       <li><a href="">Contact Us</a></li>
  7.       <li><a href="">Services</a></li>
  8.       <li><a href="">Pricing</a></li>
  9.     </ul>
  10.   </div>
  11. </nav>
英文:

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

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

  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 {
  2. list-style: none; text-align: center; font-size: 20px; }

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

  1. &lt;nav&gt;
  2.   &lt;div id=&quot;nav_link&quot;&gt;
  3.     &lt;ul&gt;
  4.       &lt;li&gt;&lt;a href=&quot;home.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  5.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  6.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  7.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
  8.       &lt;li&gt;&lt;a href=&quot;&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
  9.     &lt;/ul&gt;
  10.   &lt;/div&gt;
  11. &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:

确定