Question

导航栏中的徽标左对齐，链接位于右侧，但链接在导航栏中垂直偏离中心。无论我做什么，我都无法将它放在中心位置。在此先感谢您的帮助。这是我的代码：

HTML

  <div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <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;
}

Answer 1

试试这个https://jsfiddle.net/vb8yspjs/1/

只需在CSS中更改

即可

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

Answer 2

我能够使用JQuery垂直居中文本：

.nav-wrapper, nav {
    height: 38px;
}

nav元素和nav-wrapper类的高度必须相同，所以你应该在一个地方设置它们：

$servers = Get-Content "D:\Scripts\list1.txt"

$servers | ForEach-Object{
    $props = @{}
    $props.Server = $_
    Try{
        $operatingSystem = Get-WmiObject Win32_OperatingSystem -ComputerName $props.Server
        $props.LastBootTime = [Management.ManagementDateTimeConverter]::ToDateTime($operatingSystem.LastBootUpTime)
    } Catch {
      $err = $_.Exception.GetType().FullName
      $props.LastBootTime = $null
      Write-Warning "$err on $($props.Server)"
    }#end catch

    New-Object -TypeName psobject -Property $props
}#End foreach

我还想指出，在小屏幕上观看时的布局会因文本开始包装而中断。要解决这个问题，我建议您检查一下flexboxes。唯一的缺点是它们很新，但仍然有点儿。

希望这有帮助！

Answer 3

好的，看看这是否适用于你正在寻找的东西。只需将其添加到CSS中

即可

nav li { 
    display: inline;
    list-style-type: none;
    padding-right: 50px;
    position:relative;
    bottom: 5px;
}

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

3 个答案: