将照片和文字高度居中<ul>

问题描述 投票：0回答：2

我正在尝试将导航栏的内容居中对齐。

图像显示居中，但我怀疑这是由于其尺寸，它拉伸了导航栏。如何在不改变照片尺寸的情况下实现这一目标？

我尝试过设置 max-height，但似乎没有任何效果。

Jsfiddle 链接

  .hoyre{
    background-color:#f19f00;
    
    }
    .hoyre:hover{
    background-color:#d98500;
    }
    header{
        background-color: white;
    }
    .logo{
        width: 57px;
        height: 34px;
        padding: 0;
    }
    
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    text-transform: uppercase;
    width: 100%;
    color: black;
    }

   li {
        float: left;
    }

    li a {
        display: block;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
         color: black;
    }
    li a:hover {
        color: #f19f00;
    }
    body{
        margin:0;
        font-family: 'Roboto', sans-serif;
        background-color: #333;
    }
    .container{
        max-width:1300px;
        margin-left:auto;
        margin-right:auto;
    }
    .active {
    position: relative;
    }
</style>
  <body>
    <header>
        <div class="container">
        <ul>
          <li><a href="#"><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></a></li>
          <li><a href="#news" class="active">Home</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#about">About</a></li>
          <li class="hoyre" style="float:right;"><a href="#about">Donate</a></li>
        </ul>
        </div>
    </header>
  </body>

html css html-lists
2个回答
0
投票

我会在 

flex
上使用 
ul
，然后您可以使用 
align-items
垂直居中或定位子项。最后一个链接上的 
margin-left: auto
会将其推到右侧，然后您可以将背景颜色移动到链接以防止其拉伸父级的高度

.hoyre {
    margin-left: auto;
    background-color: #f19f00;
    min-height: 100%;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  
  .hoyre:hover {
    background-color: #d98500;
  }
  
  header {
    background-color: white;
  }
  
  .logo {
    width: 57px;
    height: 34px;
    padding: 0;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    text-transform: uppercase;
    width: 100%;
    color: black;
    display: flex;
    align-items: center;
  }
  
  li {}
  
  li a {
    display: block;
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
    color: black;
  }
  
  li a:hover {
    color: #f19f00;
  }
  
  body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #333;
  }
  
  .container {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .active {
    position: relative;
  }
  
  </style>
<body>
  <header>
    <div class="container">
      <ul>
        <li>
          <a href="#"><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></a>
        </li>
        <li><a href="#news" class="active">Home</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
        <li class="hoyre"><a href="#about">Donate</a></li>
      </ul>
    </div>
  </header>
</body>

0
投票

要在 CSS 中使用 height:100%，您应该首先定义父元素高度。然后您将 li 元素更改为像表格一样的行为并填充 100% 高度。 像这样更新你的样式（新样式前面有注释）：

li {
float: left;
height: 100%;  /*fill height */
display: table; /* behave as table*/
}

li a {
display: table-cell; /* behave as table-cell then you can use vertical alignment*/
vertical-align: middle;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
height: 100% ; /*fill height */
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
height: 80px; /*define height for using height:100% for child elements */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.