CSS样式让文字水平居中和垂直居中的方法

css中让文字居中,首先可以分单行文字和多行文字,还可以讨论高度是否固定。

不论是多行文字还是单行文字,水平居中都可以设置text-align。
text-align 属性规定元素中的文本的水平对齐方式。

垂直方向居中如下

一、高度固定
  1. 单行文字
    垂直居中,则设置line-height等于盒子的高度。
.box {
	line-height:(height);
}
  1. 多行文字
    —    display:table-cell指让标签元素以表格单元格的形式呈现,使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性,IE6/7不支持(可用其他方法实现类似效果)。同样,display:table-cell属性也会被float,position:absolute等属性破坏效果,应避免同时使用。
    设置了display:table-cell的元素对宽度高度敏感,对margin值无反应。
.box {
	display: table-cell;
    vertical-align: middle;
}
二、高度不固定

单行文字与多行文字的方法一样,
给盒子添加个内边距,让文字与边框之间有点距离。

.box {
	padding:20px;
}

后期学习了新的方法再添加居中方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值