<div><span>水平居中</span></div>
<div><span>水平居中</span></div>
柠檬酷 发表于3年前
<div><span>水平居中</span></div>
  • 发表于 3年前
  • 阅读 18
  • 收藏 0
  • 点赞 0
  • 评论 0
摘要: div 中包含多个span标签,如何使span中的内容居中

<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值,高同理
标签: html div span
共有 人打赏支持
粉丝 3
博文 65
码字总数 3040
×
柠檬酷
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: