Question

我想使用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) );

如何使图片和文字对齐？

Answer 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
}

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

使用DOM javascript包含文本和图片的按钮

1 个答案: