悬停时对齐文本和图像答案

【问题标题】：Align text and image on hover悬停时对齐文本和图像
【发布时间】：2014-04-15 19:29:10
【问题描述】：

我是 CSS 的新手。我正在尝试对齐添加到悬停效果按钮的图像。这是我尝试过的。我希望图像与文本一致，如下图所示。 http://tinypic.com?ref=30ll5qg 但我得到的是这个http://tinypic.com?ref=qrds8g

这些是我用来获取它的 css：

#button1:hover {    margin-top: 5px;
                    padding: 5px 20px 5px 0;
                    background-color: black;
                    color: #ffcb00;
                    width: 330px;
                    text-align: right;
     }
        #button1:hover:after {
            height: 50px;
            content:  url(img/Arrow.png);
            right:  50%;
            margin-top: 50%;
      }
<div style="margin-top: 10px;">

【问题讨论】：

在 tinyurl 中看不到图片

标签： html css user-interface uibutton hover

【解决方案1】：

如果您希望图像与文本水平对齐，我会<p style="width:full width of text minus width of image">your text here</p> 然后将图像和文本放在一个 div 中并使用 margin-top 定位图像

【讨论】：