Question

我有以下文字和图片，我想让它们垂直对齐在一起。

这是我的HTML

    <span class="fav">
       <img src="/Content/Images/Icons/star_grey.png">
       <img src="/Content/Images/Icons/mail.png">
       <img src="/Content/Images/Icons/clone.png">
       <span class="myText">2</span>
       <img src="/Content/Images/Icons/information_red.png" />
     </span>

这是我的css

.fav {
     vertical-align: middle;
}

.numberOfDelivs
{
   background-color:#4cb3e9;
   border-radius: 10px 10px 10px 10px;
   color: #FFFFFF;
   font-family:tahoma, arial, 'sans-serif';
   font-weight:bold;
   font-size: 10px;
   padding: 3px 6px;
   text-decoration: none;
   cursor: pointer;

}

但根据屏幕截图和文字（显示＃2）仍显示在所有图片下方

！[在此处输入图片说明] [1]

关于我如何获取“myText”类中的文本的任何建议都会向上移动，以便与图像对齐？

我尝试添加保证金或负边距和各种填充选项，但似乎没有任何效果。

Answer 1

您正在尝试对齐范围的子项，而不是跨度本身。

使用.fav > *作为选择器。

鉴于此css，为什么这些文本和图像不是垂直对齐的？

1 个答案: