div居中以及div中的元素居中

div居中以及div中的元素居中
div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。

  1. div水平居中:设置margin的左右边距为自动。

1 div
2 {
3 margin:0 auto;
4 }
2. div中的元素居中

2.1 div中的文字居中:将div的行高设置跟其高度一样的值。

1 div
2 {
3 height:200px;
4 line-height:200px;
5 }
2.2 div中的图片居中,方法一:将div的行高设置跟其高度一样的值,将其中的图片img外套上标签i,设置i和div同时垂直居中

div
{
width: 200px;
height: 200px;
line-height: 200px;
vertical-align: middle;
background-color: Gray;
}
div i
{
vertical-align: middle;
}

2.3 div中的图片居中,方法二:将div转换成tablecell,让后设置vertical-align属性居中。

div
{
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
background-color: Gray;
}

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值