文档章节

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

柠檬酷
 柠檬酷
发布于 2015/04/10 14:26
字数 272
阅读 51
收藏 0
点赞 0
评论 0

<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值,高同理

© 著作权归作者所有

共有 人打赏支持
柠檬酷
粉丝 4
博文 67
码字总数 3040
作品 0
西安
CSS布局总结

显示方式 元素的display显示方式有多种,隐藏,块级,内联,内联-块级 1、隐藏 display:none使得被选择的元素隐藏,并且不占用原来的位置。 2、块级 display:block; 表示块级元素块级元素会...

小衰哥有点帅 ⋅ 2017/09/24 ⋅ 0

前端知识复习(一)

1.CSS 中的盒子模型 画出对应的content, margin, padding, and border 边界 图片.png 2.元素 span, img, video 可以设置宽高吗? span不可以,img和video可以 span 属于行内非替换元素不能设...

治电小白菜 ⋅ 2017/11/28 ⋅ 0

Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

题目点评 这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且...

智学无忧1 ⋅ 2017/05/09 ⋅ 0

前端技术-布局解决方案

原文 http://www.cnblogs.com/jingwhale/p/4753686.html 一、居中布局 1.水平居中 行内元素 如果被设置元素为 文本、图片 等行内元素时,水平居中是通过给父元素设置 text-align:center 来实...

DanielYue ⋅ 2016/07/19 ⋅ 0

AmazeUI HTML元素

 按钮Button   am-btn-xx(default、primary、secondary、success、warning、danger、link)   am-radius 圆角按钮   am-round 椭圆形按钮   am-active 激活状态   am-disabled 禁用...

扎西多顿 ⋅ 2016/10/26 ⋅ 0

各浏览器下图片垂直居中的方法:

各浏览器下图片垂直居中的方法: 1.IE6下使用writing-mode:tb-rl;当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算...

0000001 ⋅ 2011/05/10 ⋅ 0

之css总结

(一)标准模式和怪异模式的一些不同 (1)IE对盒模型的解析 在标准模式下,页面的宽度为:width+border+padding 在怪异模式下,width就包括了padding 和border (2)在怪异模式下,如下的样式不能正常...

sunshinewyf ⋅ 2015/09/19 ⋅ 0

CSS技巧让你的网站更上一层楼

CSS是网站的外衣,所谓人靠衣装,佛靠金装,CSS决定了你给用户的第一感觉。虽然一直在做网站的架构和后端开发,但是还是需要多揣点CSS技巧,以防万一。 01.DIV水平居中 DIV 水平居中很简单,...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

两种方法实现CSS垂直居中

方法一:利用行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是250px,如...

罗马教堂的钟声 ⋅ 2015/11/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Boot整合模板引擎thymeleaf

项目结构 引入依赖pom.xml <!-- 引入 thymeleaf 模板依赖 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId......

yysue ⋅ 18分钟前 ⋅ 0

ConstraintLayout使用解析

AndroidStudio3.0创建Project默认的布局就是ConstraintLayout。 AndroidStudio3.0前的可以自己修改,使用ConstraintLayout。 为了要使用ConstraintLayout,我们需要在app/build.gradle文件中...

_OUTMAN_ ⋅ 30分钟前 ⋅ 0

OSChina 周三乱弹 —— 这样的女人私生活太混乱了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 胖达panda :你经历过体验到人生的大起大落吗?我一朋友在10秒内体验了,哈哈。@小小编辑 请点一首《almost lover》送给他。 《almost love...

小小编辑 ⋅ 今天 ⋅ 9

自己动手写一个单链表

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、概述 单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对...

公众号_好好学java ⋅ 今天 ⋅ 0

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部