0
我正在嘗試創建一個由5個元素組成的導航欄（4個常規交換圖像鏈接和1個在懸停時旋轉的中心大標誌），但是當我試圖垂直對齊中心的4個較小的元素（以便它們垂直位於較大的徽標的中間），但不起作用。任何幫助，將不勝感激。導航欄中幾個元素的垂直對齊不起作用
CSS和HTML代碼
#navigation {
float: right;
position: relative;
left: -50px;
margin: 30px; }
li \t { display:inline;
font-family: advent-pro, Helvetica, Arial, sans-serif;
position:relative;
float:left; \t
padding-left:30;
padding-right:30;
}
.midnav {
vertical-align: middle;}
\t \t
#a \t \t {display:inline;
\t \t text-decoration:none;
\t \t \t position:relative;}
#ul \t {list-style-type:none;} \t \t \t \t \t \t \t \t \t \t \t
<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>
能否請你澄清你的問題，但它我真的不清楚。你想把所有的圖像居中，這樣它們就不會左對齊了嗎？ –
嗨，很抱歉不清楚，基本上它現在顯示的方式是元素全部內聯，但較小的圖像（不是中心的大旋轉標誌）與大標誌的頂部對齊，所以我我試圖將較小的圖像放置在垂直方向，使它們看起來與大圖像的中心對齊。這有幫助嗎，如果沒有，我可以進一步解釋，謝謝！ :) – Squirrelfood
你能顯示你的完整CSS導航 –