html – 垂直对齐导航栏中包含徽标的文本

html – 垂直对齐导航栏中包含徽标的文本,第1张

概述导航栏中的徽标对齐,链接位于右侧,但链接在导航栏中垂直偏离中心.无论我做什么,我都无法将它放在中心位置.在此先感谢您的帮助.这是我的代码: HTML <div class="navbar-fixed"> <nav> <div class="nav-wrapper"> <ul> <a href = "index.html" class = "n 导航栏中的徽标左对齐,链接位于右侧,但链接在导航栏中垂直偏离中心.无论我做什么,我都无法将它放在中心位置.在此先感谢您的帮助.这是我的代码:

HTML

<div >    <nav>      <div >        <ul>        <a href = "index.HTML" class = "nav-logo"><img src="images/mo's_logo.png" Title = "Go to Mo's Gyros Home" alt = "Mo's Gyros logo"></a>          <li><a href="#">Home</a></li>          <li><a href="#">About Us</a></li>          <li><a href = "#">Specials</a></li>          <li><a href = "#">Events</a></li>        <li><a href = "#">Contact Us</a></li>        </ul>      </div> <!-- end of nav-wrapper -->    </nav>  </div> <!-- end of navbar-fixed -->

CSS

#nav-wrapper {}nav {         wIDth: 100%;        height: 38px;        padding: 5px;        position: fixed;        background-color: #5c5453;}.navbar-fixed {        padding: 0;}.nav-logo {        float: left;        padding-left: 160px;}nav li {         display: inline;        List-style-type: none;        padding-right: 50px;}a {         color: #8CBAD9;        text-decoration: none; }a:hover {         color: white;        text-decoration: underline;}ul {    text-align: right;}
解决方法 试试这个 https://jsfiddle.net/vb8yspjs/1/

只需在CSS中更改此内容即可

ul {  text-align: right;  margin: 0;  line-height: 38px;}
总结

以上是内存溢出为你收集整理的html – 垂直对齐导航栏中包含徽标的文本全部内容,希望文章能够帮你解决html – 垂直对齐导航栏中包含徽标的文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1061522.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存