css - 对齐图标和 Feed 标题

标签 css vertical-alignment

我正在尝试将图像与 对齐,但我无法让标题环绕图像图标。我这里有一个屏幕截图: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;}

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

最佳答案

我不确定您所说的让标题环绕是什么意思...但我假设您希望图像和标题彼此相邻? vertical-align 我不认为这能很好地工作。

最好的选择是将图标作为 an 移除,并将其作为背景图像放入 CSS。这样做使您能够将其定位到像素。

它还可以让您将这两个新闻\事件图标拼接成一个文件,以提供更少的资源。

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

干杯! 史蒂夫

关于css - 对齐图标和 Feed 标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16059341/

相关文章:

javascript - 如何在 jQuery Mobile 中的按钮上添加渐变悬停

html - CSS:当不知道div的固定大小时垂直对齐div

css - 更改单个顶部栏元素及其下拉菜单的背景

javascript - 为类的每个元素添加随机字体

html - 垂直对齐,让我同样头疼

css - 如何在没有这些多个 CSS 冲突的情况下将 ul 导航栏中的文本垂直居中?

css - 输入标签上的 Flexbox 垂直对齐问题

jquery - 制作粘性垂直导航的最佳方式是什么

javascript - 表单控件 : Pristine attribute is not being updated?

javascript - 如何清除:target choice?