UIButton 图标与文字上下垂直对齐

    botton.imageEdgeInsets = UIEdgeInsetsMake(- (botton.frame.size.height - botton.imageView.frame.size.height)/2, 0, (botton.frame.size.height - botton.imageView.frame.size.height)/2, 0);

    botton.titleEdgeInsets = UIEdgeInsetsMake(0, - (botton.imageView.frame.size.width/2 + botton.titleLabel.frame.size.width/2), 0, (botton.imageView.frame.size.width/2 + botton.titleLabel.frame.size.width/2));

核心代码:

UIEdgeInsetsMake(top, left, bottom, right);

由于Y轴通过top、bottom控制,在设置偏移量的时候要同时修改,如只修改一边,则偏移量倍数要x2(X轴同解)

时间: 2024-11-05 06:01:42

UIButton 图标与文字上下垂直对齐的相关文章

小图标和文字的居中对齐-小总结

小图标和文字的居中对齐问题,相信大家在很多时候会遇到.今天楼主从其他大神那边扒了一些方法,现在做个小小的总结. 说明:本次用到的小图标来自阿里巴巴矢量图,大家可以去找一下(地址:http://www.iconfont.cn/plus/collections/detail?cid=3223)我的图标尺寸是20px*20px 第一种办法:vertical-align和line-height结合 特点:这种办法只适用于放置小图标和文字的标签的display属性都是inline的情况. 效果图: 代码如

iPhone UIButton图标与文字间距设置【转】

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 50, 150, 50)]; [button setTitle:@"HHH" forState:UIControlStateNormal]; [button setBackgroundImage:[UIImage imageNamed:@"narrowend.png"] forState:UIControlStateNormal]; [

css:图标与文字对齐的两种方法

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" class="heart"> <span>1169</span> <img src="" class="comment"

使用vertical-align实现垂直对齐

关于垂直对齐,之前研究过好几次了,但感觉每次都没研究透彻,做了几个效果,就觉得自己掌握了,实在是自欺欺人.真乃搞技术的大忌. 这两天又下定决心重新开始研究vertical-allign这个高深莫测的属性了,决定一举攻破城池.但由于这个属性牵扯到的东西实在太多,line-height.盒模型等,都是css中的难点.所以要彻底掌握要花好些时间了. 使用table-cell实现垂直对齐: <!DOCTYPE html> <html lang="en"> <hea

【css基础】文本对齐,水平对齐,垂直对齐

先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注意的是如果有padding这类的东西在,千万看清楚两边的padding值是否相 同,当你看到文字不在中间的时候,可能就是因为两边的padding值不同,举例说明: <p>我是一段测试文字</p> 如果看过我前面一片做一个简单网页的日志就知道,这个应该放在body标签里面. 放在网页里就

标题栏中小图标和文字垂直居中的解决办法

我们差不多都遇到过这种情况 就是top栏里经常会有图标和文字不对齐的状态 如下图所示: 结构是 <div class="parent"> <i class="icon"></i> <span>中国</span> </div> 这里时候的css是 .parent{ width: 100%; height: 30px; background: #000000; } .icon{ display:in

CSS实现垂直对齐的4种思路

× 目录 [1]line-height [2]vertical-align [3]absolute [4]flex 前面的话 相对于水平居中,人们对于垂直居中略显为难,大部分原因是vertical-align不能正确使用.实际上,实现垂直居中也是围绕几个思路展开的.本文将介绍关于垂直居中的4种思路 思路一: 行高line-height实现单行文本垂直居中 行内流传着一种说法,单行文本垂直居中要将高度和行高设置成相同的值,但高度其实没必要设置.实际上,文本本身就在一行中居中显示.在不设置高度的情况

大小不固定的图片和多行文字的垂直水平居中

一.大小不固定,多行文字的垂直居中 ① 单行文字 可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了.例如: 单行文字居中显示测试,css样式为:height:3em; line-height:3em;-- ② 多行文字 但是对于外框高度固定,文字大小个数不固定的多行文字呢?文字可能一行显示,也有可能多行显示:文字可能是小号字体,也有可能是大号的.这时候如何让其垂直居中显示呢?看下面! 这里的文字用来做多

css基准线研究:垂直对齐的实现-好的、差的和丑陋的

这或许是因为缺少基线网格的理解和欣赏,更或者是因为基线网格是出了名的难以实现, 迄今为止还没有人拿着蓝图让它成功实现. 有些人甚至认为基线在网络上是多余的,基线作为一种排版术语和网络上的行为,在网络上遵循的规则有别于用于印刷的,line-height和真正的行距之间令人沮丧的差异就是最明显的例子. 目前,无论怎样,让我们先假设基线至少在某种程度上对于来说网页设计师是一种有用的工具.但是它到底是什么样的一种工具,在我们手上有什么可以自由使用的工具来实现它,并且最重要的是,这到底值不值得. 垂直网格