画像とテキストを縦に整列する

Question

右に私の画像（21x21px）と私のテキスト（14px）を中央に配置しようとしていますが、画像を入れるとすぐに<a>が大きくなります。どうやってそれを正しくすることができますか？

クラス "aPctrは" ちょうど

HERESに私のコードをフォト21x21pxを与えている：https://jsfiddle.net/vc0h9Ldb/

<div id="cssmenu"> 
    <ul class="_mrgA"> 
     <li> 
      <a href="#">Home</a> 
     </li> 
     <li class="active has-sub"> 
      <span class="submenu-button"></span> 
      <a href="#">Products</a> 
      <ul> 
       <li class="has-sub"> 
        <span class="submenu-button"></span> 
        <a href="#">Product 1</a> 
        <ul> 
         <li> 
          <a href="#">Sub Product</a> 
         </li> 
         <li> 
          <a href="#">Sub Product</a> 
         </li> 
        </ul> 
       </li> 
       <li class="has-sub"> 
        <span class="submenu-button"></span> 
        <a href="#">Product 2</a> 
        <ul> 
         <li> 
          <a href="#">Sub Product</a> 
         </li> 
         <li> 
          <a href="#">Sub Product</a> 
         </li> 
        </ul> 
       </li> 

      </ul> 
     </li> 
     <li> 
      <a href="#">About</a> 
     </li> 
     <li> 
      <a href="#">Contact</a> 
     </li> 
     <li class="account-lnk" style="float: right; height: 0;"> 
      <a href="#"> 
       <img src="img/autor.jpg" class="_aPctr"> 
       <span> Name</span> 
      </a> 
     </li> 
    </ul> 
</div> 

Answer 1

これを使用してください、それは本当にあなたに役立つている...

<li class="account-lnk" style="float: right; height: 0px; position: relative; display: table;"> 
<a href="#" style="padding: 14px 20px;"> 
<img class="_aPctr" src="img/autor.jpg" style="display: table-cell; vertical-align: middle;"> 
<span style="vertical-align: middle;"> Name</span> 
</a> 
</li> 

Answer 2

ちょうど最後の李にするためにパディングを変更する、それが動作します

#cssmenu > ul > li > a 
{ 
padding: 15px 20px; 
} 

コードスニペットも下に掲載されます

#cssmenu, 
 
#cssmenu ul, 
 
#cssmenu ul li, 
 
#cssmenu ul li a, 
 
#cssmenu #menu-button { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    list-style: none; 
 
    line-height: 1; 
 
    display: block; 
 
    position: relative; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#cssmenu:after, 
 
#cssmenu > ul:after { 
 
    content: "."; 
 
    display: block; 
 
    clear: both; 
 
    visibility: hidden; 
 
    line-height: 0; 
 
    height: 0; 
 
} 
 
#cssmenu #menu-button { 
 
    display: none; 
 
} 
 
#cssmenu { 
 
    font-family: "Lato",sans-serif; 
 
    line-height: 1; 
 
    top: 0; 
 
    background: #ffffff; 
 
    width: auto; 
 
    position:fixed; 
 
    width:100%; 
 
    z-index:100; 
 
} 
 

 
#cssmenu > ul > li { 
 
    float: left; 
 
} 
 
#cssmenu.align-center > ul { 
 
    font-size: 0; 
 
    text-align: center; 
 
} 
 
#cssmenu.align-center > ul > li { 
 
    display: inline-block; 
 
    float: none; 
 
} 
 
#cssmenu.align-center ul ul { 
 
    text-align: left; 
 
} 
 
#cssmenu.align-right > ul > li { 
 
    float: right; 
 
} 
 
#cssmenu.align-right ul ul { 
 
    text-align: right; 
 
} 
 
#cssmenu > ul > li > a { 
 
    padding: 15px 20px; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: #000000; 
 
    -webkit-transition: color .2s ease; 
 
    -moz-transition: color .2s ease; 
 
    -ms-transition: color .2s ease; 
 
    -o-transition: color .2s ease; 
 
    transition: color .2s ease; 
 
} 
 
#cssmenu > ul > li:hover > a, 
 
#cssmenu > ul > li.active > a { 
 
    background-color: #00D4EB; 
 
} 
 
#cssmenu > ul > li.has-sub > a { 
 
    padding-right: 25px; 
 
} 
 
#cssmenu > ul > li.has-sub > a::after { 
 
    position: absolute; 
 
    top: 21px; 
 
    right: 10px; 
 
    width: 4px; 
 
    height: 4px; 
 
    border-bottom: 1px solid #000000; 
 
    border-right: 1px solid #000000; 
 
    content: ""; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    -webkit-transition: border-color 0.2s ease; 
 
    -moz-transition: border-color 0.2s ease; 
 
    -ms-transition: border-color 0.2s ease; 
 
    -o-transition: border-color 0.2s ease; 
 
    transition: border-color 0.2s ease; 
 
} 
 
#cssmenu > ul > li.has-sub:hover > a::after { 
 
    border-color: #009ae1; 
 
} 
 
#cssmenu ul ul { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
#cssmenu li:hover > ul { 
 
    left: auto; 
 
} 
 
#cssmenu.align-right li:hover > ul { 
 
    right: 0; 
 
} 
 
#cssmenu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 
#cssmenu.align-right ul ul ul { 
 
    margin-left: 0; 
 
    margin-right: 100%; 
 
} 
 
#cssmenu ul ul li { 
 
    height: 0; 
 
    -webkit-transition: height .2s ease; 
 
    -moz-transition: height .2s ease; 
 
    -ms-transition: height .2s ease; 
 
    -o-transition: height .2s ease; 
 
    transition: height .2s ease; 
 
} 
 
#cssmenu ul li:hover > ul > li { 
 
    height: 32px; 
 
} 
 
#cssmenu ul ul li a { 
 
    padding: 10px 20px; 
 
    width: 160px; 
 
    font-size: 12px; 
 
    background: #333333; 
 
    text-decoration: none; 
 
    color: #dddddd; 
 
    -webkit-transition: color .2s ease; 
 
    -moz-transition: color .2s ease; 
 
    -ms-transition: color .2s ease; 
 
    -o-transition: color .2s ease; 
 
    transition: color .2s ease; 
 
} 
 
#cssmenu ul ul li:hover > a, 
 
#cssmenu ul ul li a:hover { 
 
    color: #ffffff; 
 
} 
 
#cssmenu ul ul li.has-sub > a::after { 
 
    position: absolute; 
 
    top: 13px; 
 
    right: 10px; 
 
    width: 4px; 
 
    height: 4px; 
 
    border-bottom: 1px solid #dddddd; 
 
    border-right: 1px solid #dddddd; 
 
    content: ""; 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transition: border-color 0.2s ease; 
 
    -moz-transition: border-color 0.2s ease; 
 
    -ms-transition: border-color 0.2s ease; 
 
    -o-transition: border-color 0.2s ease; 
 
    transition: border-color 0.2s ease; 
 
} 
 
#cssmenu.align-right ul ul li.has-sub > a::after { 
 
    right: auto; 
 
    left: 10px; 
 
    border-bottom: 0; 
 
    border-right: 0; 
 
    border-top: 1px solid #dddddd; 
 
    border-left: 1px solid #dddddd; 
 
}

<div id="cssmenu"> 
 
     <ul class="_mrgA"> 
 
      <li> 
 
       <a href="#">Home</a> 
 
      </li> 
 
      <li class="active has-sub"> 
 
       <span class="submenu-button"></span> 
 
       <a href="#">Products</a> 
 
       <ul> 
 
        <li class="has-sub"> 
 
         <span class="submenu-button"></span> 
 
         <a href="#">Product 1</a> 
 
         <ul> 
 
          <li> 
 
           <a href="#">Sub Product</a> 
 
          </li> 
 
          <li> 
 
           <a href="#">Sub Product</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li class="has-sub"> 
 
         <span class="submenu-button"></span> 
 
         <a href="#">Product 2</a> 
 
         <ul> 
 
          <li> 
 
           <a href="#">Sub Product</a> 
 
          </li> 
 
          <li> 
 
           <a href="#">Sub Product</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="#">About</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Contact</a> 
 
      </li> 
 
      <li class="account-lnk" style="float: right; height: 0;"> 
 
       <a href="#"> 
 
        <img src="img/autor.jpg" class="_aPctr"> 
 
        <span> Name</span> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div>

Answer 3

問題は、他の人と同じように使用している最後のタグのパディングであります内容が高さを超えています。

<li class="account-lnk" style="float: right; height: 0;"> 
    <a href="#"> 
     <img src="img/autor.jpg" class="_aPctr"> 
     <span> Name</span> 
    </a> 
</li> 

たとえば、あなたはこれにそれを変更することができます

<li class="account-lnk" style="float: right; height: 0;"> 
    <a href="#" style="padding:16px;"> 
     <img src="img/autor.jpg" class="_aPctr"> 
     <span> Name</span> 
    </a> 
</li> 

CSSを変更すると、あなたはIMGにvertical-align: middle;を適用することができます

Answer 4

までです。そして、それは次のようになります。私はこのデモのためにあなたのフィドルからCSSを取っ

#cssmenu, 
 
#cssmenu ul, 
 
#cssmenu ul li, 
 
#cssmenu ul li a, 
 
#cssmenu #menu-button { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    list-style: none; 
 
    line-height: 1; 
 
    display: block; 
 
    position: relative; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#cssmenu:after, 
 
#cssmenu > ul:after { 
 
    content: "."; 
 
    display: block; 
 
    clear: both; 
 
    visibility: hidden; 
 
    line-height: 0; 
 
    height: 0; 
 
} 
 
#cssmenu #menu-button { 
 
    display: none; 
 
} 
 
#cssmenu { 
 
    font-family: "Lato",sans-serif; 
 
    line-height: 1; 
 
    top: 0; 
 
    background: #ffffff; 
 
    width: auto; 
 
    position:fixed; 
 
    width:100%; 
 
    z-index:100; 
 
} 
 

 
#cssmenu > ul > li { 
 
    float: left; 
 
} 
 
#cssmenu.align-center > ul { 
 
    font-size: 0; 
 
    text-align: center; 
 
} 
 
#cssmenu.align-center > ul > li { 
 
    display: inline-block; 
 
    float: none; 
 
} 
 
#cssmenu.align-center ul ul { 
 
    text-align: left; 
 
} 
 
#cssmenu.align-right > ul > li { 
 
    float: right; 
 
} 
 
#cssmenu.align-right ul ul { 
 
    text-align: right; 
 
} 
 
#cssmenu > ul > li > a { 
 
    padding: 20px; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: #000000; 
 
    -webkit-transition: color .2s ease; 
 
    -moz-transition: color .2s ease; 
 
    -ms-transition: color .2s ease; 
 
    -o-transition: color .2s ease; 
 
    transition: color .2s ease; 
 
} 
 
#cssmenu > ul > li:hover > a, 
 
#cssmenu > ul > li.active > a { 
 
    background-color: #00D4EB; 
 
} 
 
#cssmenu > ul > li.has-sub > a { 
 
    padding-right: 25px; 
 
} 
 
#cssmenu > ul > li.has-sub > a::after { 
 
    position: absolute; 
 
    top: 21px; 
 
    right: 10px; 
 
    width: 4px; 
 
    height: 4px; 
 
    border-bottom: 1px solid #000000; 
 
    border-right: 1px solid #000000; 
 
    content: ""; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    -webkit-transition: border-color 0.2s ease; 
 
    -moz-transition: border-color 0.2s ease; 
 
    -ms-transition: border-color 0.2s ease; 
 
    -o-transition: border-color 0.2s ease; 
 
    transition: border-color 0.2s ease; 
 
} 
 
#cssmenu > ul > li.has-sub:hover > a::after { 
 
    border-color: #009ae1; 
 
} 
 
#cssmenu ul ul { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
#cssmenu li:hover > ul { 
 
    left: auto; 
 
} 
 
#cssmenu.align-right li:hover > ul { 
 
    right: 0; 
 
} 
 
#cssmenu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 
#cssmenu.align-right ul ul ul { 
 
    margin-left: 0; 
 
    margin-right: 100%; 
 
} 
 
#cssmenu ul ul li { 
 
    height: 0; 
 
    -webkit-transition: height .2s ease; 
 
    -moz-transition: height .2s ease; 
 
    -ms-transition: height .2s ease; 
 
    -o-transition: height .2s ease; 
 
    transition: height .2s ease; 
 
} 
 
#cssmenu ul li:hover > ul > li { 
 
    height: 32px; 
 
} 
 
#cssmenu ul ul li a { 
 
    padding: 10px 20px; 
 
    width: 160px; 
 
    font-size: 12px; 
 
    background: #333333; 
 
    text-decoration: none; 
 
    color: #dddddd; 
 
    -webkit-transition: color .2s ease; 
 
    -moz-transition: color .2s ease; 
 
    -ms-transition: color .2s ease; 
 
    -o-transition: color .2s ease; 
 
    transition: color .2s ease; 
 
} 
 
#cssmenu ul ul li:hover > a, 
 
#cssmenu ul ul li a:hover { 
 
    color: #ffffff; 
 
} 
 
#cssmenu ul ul li.has-sub > a::after { 
 
    position: absolute; 
 
    top: 13px; 
 
    right: 10px; 
 
    width: 4px; 
 
    height: 4px; 
 
    border-bottom: 1px solid #dddddd; 
 
    border-right: 1px solid #dddddd; 
 
    content: ""; 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transition: border-color 0.2s ease; 
 
    -moz-transition: border-color 0.2s ease; 
 
    -ms-transition: border-color 0.2s ease; 
 
    -o-transition: border-color 0.2s ease; 
 
    transition: border-color 0.2s ease; 
 
} 
 
#cssmenu.align-right ul ul li.has-sub > a::after { 
 
    right: auto; 
 
    left: 10px; 
 
    border-bottom: 0; 
 
    border-right: 0; 
 
    border-top: 1px solid #dddddd; 
 
    border-left: 1px solid #dddddd; 
 
} 
 
#img-vertical{ 
 
    vertical-align:middle; 
 
} 
 

\t <div id="cssmenu"> 
 
\t \t <ul class="_mrgA"> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="#">Home</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="active has-sub"> 
 
\t \t \t \t <span class="submenu-button"></span> 
 
\t \t \t \t <a href="#">Products</a> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li class="has-sub"> 
 
\t \t \t \t \t \t <span class="submenu-button"></span> 
 
\t \t \t \t \t \t <a href="#">Product 1</a> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <a href="#">Sub Product</a> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <a href="#">Sub Product</a> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li class="has-sub"> 
 
\t \t \t \t \t \t <span class="submenu-button"></span> 
 
\t \t \t \t \t \t <a href="#">Product 2</a> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <a href="#">Sub Product</a> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <a href="#">Sub Product</a> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="#">About</a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="#">Contact</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="account-lnk" style="float: right; height: 0;"> 
 
\t \t \t \t <a href="#"> 
 
\t \t \t \t \t <img id="img-vertical" src="img/autor.jpg" class="_aPctr"> 
 
\t \t \t \t \t <span> Name</span> 
 
\t \t \t \t </a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div>

。