1

我想使用 DOM 创建包含文本和图片的按钮。在我的代码中，我可以在按钮上获取文本和图片。但问题是，按钮上的图片出现在顶部，图片后面的文字不在同一行。

phone_btn.appendChild(picture)
phone_btn.appendChild( document.createTextNode(text) );

我也像这段代码一样使用CSS，但图片没有出现

    phone_btn.backgroundImage= 'url(http:...)';
    phone_btn.backgroundRepeat='no-repeat';
    phone_btn.paddingLef='30px';
    phone_btn.appendChild( document.createTextNode(text) );

我该怎么做才能使图片和文字对齐？

4

1 回答 1

1

这听起来纯粹是一个 CSS 问题，与 javascript 无关。我建议先正确地获取 CSS 代码，然后如果您需要动态创建或更改该元素，请在之后进行。

<a class="button">Text</a>

.button {
     padding: 0 10px;
     background-image: url(bg.jpg);
     display: block;
     height: 30px;
     line-height: 30px;
     text-align: center
}

结合显示块，将高度和行高设置为相等将使文本垂直居中。此高度应等于背景图像的高度。

于 2012-07-24T13:31:30.353 回答