Css 对齐图标和提要标题

Css 对齐图标和提要标题,css,vertical-alignment,Css,Vertical Alignment,我试图将图像与图标对齐,但无法使标题环绕图像图标。我这里有一个屏幕盖: 我的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; colo

我试图将图像与图标对齐,但无法使标题环绕图像图标。我这里有一个屏幕盖:

我的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;}

任何帮助都将不胜感激。我以前遇到过这种情况,但我的技巧在这种情况下不起作用。提前谢谢。

我不知道你说的标题是什么意思……但我想你希望图片和标题在一起?垂直对齐我不认为对这个效果很好

最好的选择是删除图标作为背景图像,而将其作为背景图像放入CSS中。这样做可以将其定位到像素

它还允许您将这两个新闻\事件图标精灵化到一个文件中,以提供更少的资源

干杯!
史蒂夫

请给我们HTML好吗?