Выравнивание значка и заголовка подачи

Question

Я пытаюсь выровнять изображение с помощью, и я не могу получить заголовок, чтобы обернуть значок изображения. У меня есть экранная крышка здесь: http://instagram.com/p/YNGBzrtAs8/

Мой CSS-код - беспорядок, потому что я все пытаюсь, и он становится беспорядочным. Вот текущее беспорядок:

#deck-sub .news-feed { float: left; width: 90%; padding: 5%; margin: 0 0 15px 0; } 
    #deck-sub h1 { background: none; font: bold 2.0em Arial, Helvetica, sans-serif; color: #006586; margin: 0 0 -8px 0; } 
    #deck-sub .news-feed h2 a { color: #006586; text-decoration: none; font-size: 1.2em !important; margin: -33px 0 0 0;} 
    #deck-sub .news-feed ul {vertical-align: middle !important; background: none; padding: 5px 0 0 0; list-style: none; } 
    #deck-sub .news-feed ul li { vertical-align: middle !important; width: 100%; padding: 5px 0 5px 0; margin: 5px 0 0 0;} 
    #deck-sub .news-feed ul li a { vertical-align: middle !important; width: 100%; font: 0.8em/1.1em Arial, Helvetica, sans-serif; color: #555 !important; text-decoration: none; padding: 0px 0 0 0; margin: -5px 0 0 0; } 
    #deck-sub .news-feed ul li a:hover { background: none; color: #009fc7 !important; } 
    #deck-sub .new-feed ul li img { vertical-align: middle !important; } 
    #deck-sub .sfnewsListItem { vertical-align: middle !important; background: #ccc; } 
    #deck-sub .sfnewsMetaInfo { vertical-align: middle !important; padding: 0px; margin: 0px; background: #444;} 

Любая помощь была бы принята с благодарностью. Я сталкивался с этим раньше, но мои трюки в этом случае не работают. Заранее спасибо.

Answer 1

Я не уверен, что вы подразумеваете под заголовком, чтобы обернуть ... но я предполагаю, что вы хотите, чтобы изображение и название были рядом друг с другом? vertical-align Я не верю, что это работает великолепно.

Лучший вариант - удалить значок в виде a и вместо этого поместить его в CSS в качестве фонового изображения. Это дает вам возможность позиционировать его на пиксель.

Он также позволит вам описать эти два значка новостей \ события в один файл, чтобы обслуживать меньше ресурсов.

http://www.w3schools.com/css/css_image_sprites.asp

Ура! Steve