Как с позиционировать правильно картинку?

@D1mka21 · Регистрация: 03.07.2015

Author24 — интернет-сервис помощи студентам

Всем добрый день!

Подскажите, пожалуйста, разместить картинку внутри списка ul li, так что бы текст остался по центру?
Я не знаю, можно или нет давать ссылку в песочницу?
http://codepen.io/d1mka21/pen/jqNgre

HTML5

<div class="inner">
            <div class="container">
                <div class="left_menu_inner">
                    <h2>ПОЛНЫЙ КАТАЛОГ ТОВАРОВ</h2>
                    <ul>
                        <li>
                            <a href="#">    
                                <img src="images/left_menu_img.png" alt=""> Алюминиевый профиль (Без покрытия)
                            </a>
                        </li>                   
                    </ul>
                </div>
                <div class="main_content">
                    
                </div>
            </div>
        </div>

CSS

.left_menu_inner{float: left;}
.left_menu_inner>h2{
  width: 350px;
  padding: 22px 0;
  font-family: 'Esqadero-FF-CY-4F-Regular';  
  font-size: 16px;
  text-align: center;
  color: #fff;
  background-color: #081f34;
}
.left_menu_inner li{
  list-style-type: none;
}
.left_menu_inner li a{
  display:  block;
  padding: 16px 0 16px 58px;
  font-family: 'ProximaNova-Reg';
  font-size: 14px;
  vertical-align: middle;
  color: #000;
  background-color: #f4f4f4;
}
.left_menu_inner li a img{
  display: block;
  position: absolute;
  left: 20px;
  height: 30px;
  width: 30px;
  visibility: visible;/*hidden*/
}

Спасибо Всем откликнувшимся!!!

@Resume · 26.02.2016, 17:27

так пойдет ?

@bobrzzz · 26.02.2016, 17:33

я так понял по центру вертикали?

http://codepen.io/anon/pen/PNYMXB

если коротко, то я там только вот это поправил:

CSS

.left_menu_inner li a img{
  display: block;
  position: absolute;
  left: 20px;
  height: 30px;
  width: 30px;
  visibility: visible;/*hidden*/
}

на вот это:

CSS

.left_menu_inner li a img{
  display: inline-block;
  vertical-align: middle;
  left: 20px;
  height: 30px;
  width: 30px;
  visibility: visible;/*hidden*/
}

@D1mka21 · 26.02.2016, 20:14 **[ТС]**

bobrzzz, спасибо большое!!!)

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	26.02.2016, 17:27	2
	так пойдет ? Миниатюры 0

@D1mka21 0 / 0 / 1 Регистрация: 03.07.2015 Сообщений: 80
	26.02.2016, 20:14 [ТС]	4
	bobrzzz, спасибо большое!!!) 0

Как с позиционировать правильно картинку?

Решение