html - 导航栏中多个元素的垂直对齐不起作用

Question

我正在尝试创建一个由 5 个元素组成的导航栏(4 个常规交换图像链接和 1 个在悬停时在中心旋转的较大 Logo )，但是当我尝试垂直对齐中心的 4 个较小元素时(以便它们垂直位于较大 Logo 的中间)它不起作用。任何帮助将不胜感激。

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>

Answer 1

您需要使用以下 CSS 使 ul 像 table 及其small images 一样显示为 cell:

    #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>