Button 左边图片右边文字居中显示样式

最新推荐文章于 2022-03-19 15:09:33 发布
置顶 最新推荐文章于 2022-03-19 15:09:33 发布
阅读量5.2k 收藏 1
点赞数 1
分类专栏： Android 文章标签： android xml java 界面 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011636988/article/details/26334947
版权
这篇博客探讨了在Android中如何使Button的内容实现左边图片、右边文字居中显示。传统的drawableLeft属性无法达成理想效果。作者分享了两种成功的方法，一种利用SpannableString和ImageSpan，但图片大小受限于文字高度。文中还展示了实际效果，并表示欢迎交流讨论。
摘要由CSDN通过智能技术生成

最近在做的一个个界面，底部导航按钮需要采用Button，而Button显示内容为左边图片右边文字的样式。效果如

分别为四个按钮。查了很久的Button属性，发现Button自带的属性：drawableLeft、drawableTop、drawableBottom等这些属性都满足不了需求，用drawableLeft效果图为：

Button中间的图片和文字无法实现居中显示的效果。

通过网上查阅了些资料，发现两种方法成功的写出想要的效果。第一种：采用SpannableString和ImageSpan结合使用达到该效果，但是图片的大小不能超过文字的高度。

bt1 = (Button)findViewById(R.id.bt1);
		SpannableString spanText = new SpannableStrin
最低0.47元/天 解锁文章
XPH-xph
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
实现 图片+文字 一起居中显示的 Button
Gong_zhuo的博客
03-29 3641
标签： ``` android:drawableLeft， android:drawableRight， android:drawableTop， android:drawableBottom； ``` 但是如果使用上述标签，就会发现图标会贴着 Button 边缘，无法和文字一起居中。
android（安卓） 左边图片右边文字的button （按钮）
Kunvin的专栏
01-17 1万+
安卓开发中使用Button控件实现左边图片右边文字的按钮
button 左边图片右边文字样式
weixin_33842328的博客
09-30 1081
状态值 : 正常 状态值 : 选中 #pragma mark - buttonPress- (void)buttonPress:(UIButton * )sender { if (sender.tag == 130) { if (!sender.selected) { sender.selected = YES...
iOS-Button图片和文字垂直居中【按钮图片和文字同时居中】
weixin_30411239的博客
03-09 224
以前不怎么有这样的需求，最近开发经常用到，所以就干脆封装一个这样的 Button 让图片和字体都垂直居中，重写layoutSubviews方法，来实现就可以，至于layoutSubviews 方法什么时候触发，可以自行查下； - (instancetype)initWithCoder:(NSCoder *)coder{ self = [super initWithCod...
左图片，右文本。要求文本上下居中的写法。
yumon321的博客
06-06 345
<div style="text-align: center;overflow: hidden;width: 50%;float: left;"><img src="https://us03-imgcdn.ymcart.com/48281/2020/06/06/2/e/2e05bef678a90ca1.jpg"></div> <div style="float: left;width: 50%;display: table;height: 210px;">.
Firefox下input button内文字不能垂直居中的解决方法
09-25
在Firefox浏览器中，button类型的input元素有时会遇到文字垂直居中困难的问题。这种情况通常出现在开发者尝试通过CSS样式对按钮内的文字进行居中调整时，发现调整无效。原因是Firefox浏览器为input元素引入了一个...
图片与文字同排垂直居中的CSS样式
12-11
单独文字垂直居中我们只需要设置CSS样式line-height属性即可。...文字与图片同排，在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性。 如：.aa img{vertical-align:middle;}
iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐
09-03
本篇将深入讲解如何利用 `UIEdgeInsets` 来实现 `UIButton` 上的文字和图片的上下垂直居中对齐。 `UIEdgeInsets` 是一个结构体，用于描述四边的内边距。它由四个浮点型变量组成：`top`、`left`、`bottom` 和 `right...
浅谈浏览器的兼容模式下的button中文字垂直方向不居中显示
09-22
在上述描述中提到了两种情况，一种是未指定height的情况下文字垂直不居中，另一种是通过添加height样式后文字垂直居中了。这种现象可能是由于默认情况下Button的行高（line-height）和字体大小（font-size）没有很好...
VB6功能强大的按钮控件
06-09
能实现java、mac、vista等多种风格的按钮，可自定义添加PNG透明图片，实现不规则图形按钮。
图片左（右）的文字垂直居中
weixin_53488675的博客
03-19 396
属性：vertical-align: middle; <img src="../assets/电子名片.png" alt="图片加载失败" style=" width: 50px; vertical-align: middle; margin-left: 20px; margin-right: 20px; "
Android 给button左侧设置小图标右侧文字
weixin_41326227的博客
04-01 1914
通过android:drawableLeft直接设置发现图片大小无法缩放； 查了一下需要设置setBounds可以改变大小 1.Button里面设置一下 <Button android:id="@+id/scanBtn" android:layout_width="10dp" android:layout_height="wrap_content" ...
重写button实现文字图片居中显示
沉浸在技术的海洋里
10-19 1687
最近项目中需要做像单条微博下方的评论、转发、点赞按钮一样效果的几个小按钮，就是图片在文字的左边，并且都居中显示。一开始我尝试的方法是使用android:drawableLeft 和 paddingleft 来进行一个微调，发现可以做到想要的效果，但是新的问题也随之而来了。我的项目中底部并不是固定的三个按钮，当满足一定条件的时候，左侧的按钮会隐藏掉，那么之前调的paddingleft 基本算是作
怎么将Button上的文字和android:drawableLeft都居中
dezhizeng的专栏
05-24 6064
在button中要实现　将Button上的文字和android:drawableLeft都居中是不可能的，　即使用paddingleft来调，　但是也会遇到换语言后，　显示怪异的问题。 我用如下方法来实现： 用一个linearlayout来实现button                 android:id="@+id/iphone_call_end"
设置button的样式，使得按钮的图片在上面，文字在图片的下面
weixin_34111790的博客
05-17 1961
2019独角兽企业重金招聘Python工程师标准>>> ...
android中的按钮，图形按钮，带文字的图片按钮
weixin_33721344的博客
12-28 729
先来看看效果图吧： 效果就是这么简单，其中第一行的2个算是默认的吧，第二行的2个按钮当鼠标点击的时候图片发送变化。 其中main.xml大致代码如下： <?xmlversion="1.0" encoding="utf-8"?> <TableLayoutxmlns:android="http://schemas....
使PB窗口居中
【海洋】的 VLOG
05-13 1788
在窗口属性的Position页中可以粗略地设置窗口的弹出位置。然而，你并不知道客户机的屏幕分辨率是多少(800×600还是1024×786)，不如在Open事件中加入下列代码使其居中： 　　GetEnvironment(Env)//获取客户机环境信息 　　dy=(Pixelstounits(Env.ScreenHeight,YPixelsToUnits!)－this.Height)/2
自定义控件让TextView、Button的drawableLeft和drawableRight与文本一起居中显示
热门推荐
小单的博客专栏
04-17 2万+
TextView的drawableLeft、drawableRight和drawableTop是一个常用、好用的属性，可以在文本的上下左右放置一个图片，而不使用更加复杂布局就能达到，我也常常喜欢用RadioButton的这几个属性实现很多效果，但是苦于不支持让drawbleLeft与文本一起居中，设置gravity为center也无济于事，终于有空研究了一下，这里与大家一起分享。
html button字体居中
最新发布
08-23
在HTML中，要使`<button>`元素中的字体居中，可以通过CSS样式来实现。这里有几种常见的方法： 1. 使用`text-align`属性： 可以在`<button>`元素内部的`<span>`标签（如果按钮内包含文本，通常会用`<span>`包裹这些文本）上设置`text-align: center;`属性。这样做可以使得按钮内的文本水平居中。 2. 使用CSS样式表： 在样式表中，可以通过设置`<button>`元素的`text-align`属性来实现水平居中，或者使用`display: flex;`和`justify-content: center;`来更全面地控制按钮内元素的布局。 3. 直接在`<button>`元素上使用内联样式： 也可以直接在`<button>`标签上使用`style`属性来实现居中，例如`<button style="text-align: center;">按钮文本</button>`。 下面是一个简单的示例代码，展示了如何在样式表中使用`text-align`属性来使按钮中的文本居中： ```html <!DOCTYPE html> <html> <head> <style> .button-style { text-align: center; } </style> </head> <body> <button class="button-style">居中文本</button> </body> </html> ``` 这个示例中，`<button>`标签被赋予了一个`class`，然后在CSS中为这个`class`定义了`text-align: center;`属性，使得按钮中的文本水平居中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值