html 照片和文字居中< ul>

os8fio9y 于 2023-10-14 发布在其他

关注(0)|答案(2)|浏览(103)

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

图像显示居中，但我怀疑这是由于它的大小，这是拉伸导航栏。如何在不改变照片大小的情况下实现这一点？
我试过设置最大高度，但似乎没有任何效果。
Jsfiddle link

.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

来源：https://stackoverflow.com/questions/44335196/center-photo-and-text-in-height-ul

2条答案

按热度按时间

8qgya5xd1#

我会在ul上使用flex，然后你可以使用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）回复(0）举报 2023-10-14

cqoc49vn2#

在你的css中使用height：100%，你应该先定义父元素的height。然后你改变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 */
}

赞(0）回复(0）举报 2023-10-14

我来回答

html 照片和文字居中< ul>

2条答案

相关问题

热门标签

最新问答