如何在不最小化照片的情况下使照片与文字居中？ 我试过了;最大高度:xx，但事实并非如此。
照片高度居中，文字不居中。这怎么可能？
.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>
最佳答案
我会在 ul 上使用 flex，然后您可以使用 align-items 来垂直居中或定位子项。最后一个链接上的 margin-left: auto 会将其向右推，然后您可以将背景颜色移动到链接以防止它拉伸(stretch)父级的高度
.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>关于html - 照片和文字居中 <ul>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44335196/