<div><span>水平居中</span></div>

<div> <span>水平居中</span> </div>

<div>
  <span>水平居中</span>
</div>
急求如何将该span中的字水平居中
方法1: span{ width:100px; height:20px; line-height:20px; text-align:center; float:left;}
方法2: span{ width:100px; height:20px; line-height:20px; text-align:center; display:block;}
方法3: span{ float:left; padding:5px 20px;}

说明:
方法1和方法2都在处理span标签显示方式,span标签默认是行内元素,如果给它设置了float或dispaly:block属性就能让它转为块级元素,line-height设置行高,设置它后文字会垂直居中,text-align:center设置文字水平居中,这样达到自己的需求
方法3利用内边距进行设置,padding:5px 20px(完整写法:padding:5px 20px 5px 20px;) 设置了上右下左各个参数,如果上下,左右参数相同就可以简写,例如:你的div宽高分别为:100px 20px; 你设置span最大不能超过父级div,其中span的宽为:字体长度加上左右padding值,高同理

转载于:https://my.oschina.net/u/2345713/blog/398537

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值