HTML – 使用元素内的图像
我试图在按钮元素中包含图像和一些文本.我的代码如下:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button> CSS是: .testButton1 { font-size:100%; height:10%; width: 25% } .testButton1 img { height:80%; vertical-align:middle; } 我想要做的是将图像定位到按钮的左边缘,并将文本放在中间或右侧.使用& nbsp作品,但也许有点粗糙.我试图用跨度或div来包围图像和文本,然后定位它们,但这似乎搞砸了. 似乎正在发生的事情是按钮标签内的任何内容(除非格式化)都被定位为一个单元位于较宽按钮的中心(如果按钮宽度保持自动调整则不明显,因为两个项目是并排的. 任何帮助,一如既往,表示赞赏.谢谢. 解决方法
背景图像方法
您可以使用背景图像并完全控制图像定位. 工作示例:http://jsfiddle.net/EFsU8/ BUTTON { padding: 8px 8px 8px 32px; font-family: Arial,Verdana; background: #f0f0f0 url([url or base 64 data]); background-position: 8px 8px; background-repeat: no-repeat; }? 一个稍微“漂亮”的例子:http://jsfiddle.net/kLXaj/1/ 并且another example显示基于以下内容的按钮调整:hover和:active状态. 儿童元素方法 前面的例子可以使用INPUT [type =“button”]和BUTTON.允许BUTTON标记包含标记,适用于需要更大灵活性的情况.在重新阅读原始问题之后,还有几个例子:http://jsfiddle.net/kLXaj/5/ 此方法根据按钮的大小自动重新定位图像/文本,并提供对按钮内部布局的更多控制. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |