我正在尝试创建一个导航栏，其中包含5个元素（4个常规交换图像链接和1个在悬停时旋转的中心较大的徽标），但是当我尝试垂直对齐中心的4个较小元素时（这样它们垂直位于较大的徽标中间）它不起作用。任何帮助将不胜感激。
CSS和HTML代码
#navigation {
float: right;
position: relative;
left: -50px;
margin: 30px; }
li { display:inline;
font-family: advent-pro, Helvetica, Arial, sans-serif;
position:relative;
float:left;
padding-left:30;
padding-right:30;
}
.midnav {
vertical-align: middle;}
#a {display:inline;
text-decoration:none;
position:relative;}
#ul {list-style-type:none;}
<style>
.panel {
margin: 0 auto;
width: 150px;
height: 150px;
position: relative;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;}
.panel .front {
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel.flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel .back {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);}
</style>
<div id="navigation">
<ul>
<li class="midnav">
<a href="index.html">
<img src="blabla" width="70" height="70" id="Image1"
onMouseOver="MM_swapImage('Image1','','blabla.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
</li>
<li class="midnav">
<a href="About.html">
<img src="blabla" width="70" height="70" id="Image2"
onMouseOver="MM_swapImage('Image2','','blabla.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
</li>
<li>
<div class="hover panel">
<div class="front">
<div class="pad">
<img src="blabla" width="150" height="150" alt="logo front" />
</div>
</div>
<div class="back">
<div class="pad">
<img src="blabla" width="150" height="150" alt="logo back" />
</div>
</div>
</div>
</li>
<li class="midnav">
<a href="blabla.pdf" target="_blank"
onMouseOver="MM_swapImage('Image6','','blabla.jpg',1)" onMouseOut="MM_swapImgRestore()">
<img src="blabla.jpg" width="70" height="70" id="Image6">
</a>
</li>
<li class="midnav">
<a href="blabla.pdf" target="_blank">
<img src="blabla.jpg" width="70" height="70" id="Image3"
onMouseOver="MM_swapImage('Image3','','images/logos/Words/contactD.jpg',1)"
onMouseOut="MM_swapImgRestore()">
</a>
</li>
</ul>
</div>
答案 0 :(得分：0)
如果您尝试将图片垂直居中并水平居中，并使用徽标fiddle
，请使用text-align:center
#navigation {
text-align:center;
float: right;
position: relative;
left: -50px;
margin: 30px;
}
.midnav {
vertical-align: middle;
}<div id="navigation">
<ul>
<li class="midnav"> <a href="index.html">
<img src="blabla" width="70" height="70" id="Image1" onMouseOver="MM_swapImage('Image1','','blabla.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
</li>
<li class="midnav"> <a href="About.html">
<img src="blabla" width="70" height="70" id="Image2" onMouseOver="MM_swapImage('Image2','','blabla.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
</li>
<li>
<div class="hover panel">
<div class="front">
<div class="pad">
<img src="blabla" width="150" height="150" alt="logo front" />
</div>
</div>
<div class="back">
<div class="pad">
<img src="blabla" width="150" height="150" alt="logo back" />
</div>
</div>
</div>
</li>
<li class="midnav"> <a href="blabla.pdf" target="_blank" onMouseOver="MM_swapImage('Image6','','blabla.jpg',1)" onMouseOut="MM_swapImgRestore()">
<img src="blabla.jpg" width="70" height="70" id="Image6">
</a>
</li>
<li class="midnav"> <a href="blabla.pdf" target="_blank">
<img src="blabla.jpg" width="70" height="70" id="Image3" onMouseOver="MM_swapImage('Image3','','images/logos/Words/contactD.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
</li>
</ul>
</div>
答案 1 :(得分：0)
您需要使用以下css将 ul 显示为表格及其小图片作为单元格：
#navigation {
float: right;
position: relative;
left: -50px;
margin: 30px;
}
#navigation ul{
display: table-row;
}
.midnav {
vertical-align: middle;
display: table-cell;
}<div id="navigation">
<ul>
<li class="midnav">
<a href="index.html">
<img src="blabla" width="70" height="70" id="Image1" onMouseOver="MM_swapImage('Image1','','blabla.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
</li>
<li class="midnav">
<a href="About.html">
<img src="blabla" width="70" height="70" id="Image2" onMouseOver="MM_swapImage('Image2','','blabla.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
</li>
<li>
<div class="hover panel">
<div class="front">
<div class="pad">
<img src="blabla" width="150" height="150" alt="logo front" />
</div>
</div>
<div class="back">
<div class="pad">
<img src="blabla" width="150" height="150" alt="logo back" />
</div>
</div>
</div>
</li>
<li class="midnav">
<a href="blabla.pdf" target="_blank" onMouseOver="MM_swapImage('Image6','','blabla.jpg',1)" onMouseOut="MM_swapImgRestore()">
<img src="blabla.jpg" width="70" height="70" id="Image6">
</a>
</li>
<li class="midnav">
<a href="blabla.pdf" target="_blank">
<img src="blabla.jpg" width="70" height="70" id="Image3" onMouseOver="MM_swapImage('Image3','','images/logos/Words/contactD.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
</li>
</ul>
</div>