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

Question

我正在尝试创建一个由 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>

Answer 1

如果您尝试将图像垂直居中和水平居中放置并带有徽标 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>

Answer 2

您需要使 ul 显示为 table 及其 小图像 作为其 cell 使用以下 css:

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

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

Vertical align of several elements in Nav Bar not working

html

css

alignment