Вертикально выровнять картинку и текст

Im пытается получить мою картинку (21x21px) и мой текст (14px) с правой стороны, чтобы вертикально центрировать, но как только я поместил свою фотографию в нее, <a> станет больше .. как я могу сделать это правильно?Вертикально выровнять картинку и текст

класс "aPctr" просто давая фото 21x21px

Heres мой код: 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>

источник

2016-06-16 Smythu

Пожалуйста, используйте это, это действительно поможет вам ...

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

источник

2016-06-16 14:28:11 iyyappan

Просто измените отступы для в прошлом ли, он будет работать

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

источник

2016-06-16 14:27:00 Shivani

Проблема с обивкой последнего тега, который использует то же, как и другие и его содержимое превышает высоту.

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

меняющегося КСС до вас

источник

2016-06-16 14:29:14 Mojtaba

Да, но тогда левая сторона выше, чем кнопки – Smythu

@Smythu. Это может быть не так. Вы можете просто управлять, настроив css. Просто настройте последнюю. играйте с дополнением и получите окончательный результат. Попробуй ;) – Mojtaba

вы можете применить vertical-align: middle; на пер. Тогда это выглядит следующим образом:

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

Я взял CSS с вашей скрипки для этой демонстрации.

источник

2016-06-16 14:30:00

Вертикально выровнять картинку и текст

ответ

Смежные вопросы