如何设置图片、文字在容器(div)中垂直居中的显示?

来源:互联网 发布:c# 高级编程教程 编辑:程序博客网 时间:2024/03/29 19:17

1、设置文字在div 容器中垂直居中显示

这里写图片描述

<div style="border: 1px #f00 solid;height: 200px;width: 60%;text-align: center;line-height: 200px;">    <span>文字垂直居中</span></div>

2、设置图片在div 容器中垂直居中显示
这里写图片描述

<div style="border: 1px #f00 solid;height: 200px;width: 60%;text-align: center;line-height: 200px;">    <img src="http://img5.imgtn.bdimg.com/it/u=3778965389,999130720&fm=27&gp=0.jpg" width="50%" height="50%" style="vertical-align: middle;"/></div>

到此为止。以上两个实现的方法,不管哪种方法。代码也只是实现功能的一种手段。前端小生曾经也为这个问题费劲周折。空闲时间也为记载一些基础的技能。或许没有必要去熟知功能的实现以及实现的原理。

3、推荐:使用Flex 布局居中

<div style="border: 1px #f00 solid;height: 200px;width: 60%;display: flex;justify-content: center;align-items: center;">    <img src="http://d.hiphotos.baidu.com/image/h%3D220/sign=8615ce04df39b60052ce08b5d9523526/b58f8c5494eef01fa9f2d522eafe9925bd317d77.jpg" width="50%" height="50%"/></div>
阅读全文
0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 中山车牌网上选号后怎么办 买楼房70年以后怎么办 暂住证过期2个月怎么办 换领驾驶证超期了怎么办 车牌租出去要不回来怎么办 汽车放久了没电怎么办 上海网约车资格证怎么办 手机掉在滴滴上怎么办 在滴滴上丢手机怎么办 把东西落在出租车上怎么办 租好房子后悔了怎么办 转租房东不退押金怎么办 亲戚借户口本办公租房怎么办 7.1深圳禁行货车怎么办 怎么办无锡市的货车临时通行证 武汉医保卡密码忘了怎么办 打出租车被黑了怎么办 行李掉在出租车上怎么办 家庭农场买农机怎么办补贴 在异地买的保险怎么办 理发店被投诉工商局找我怎么办? 临安市民卡丢了怎么办 合肥分期付款买手机被骗怎么办 公司注销后还遇到投诉怎么办 超市购物结账时少收钱怎么办 卖给顾客东西时会有斜念怎么办 实体店家纺想换货怎么办 劳动仲裁裁决部分不服怎么办 劳动仲裁公司拒不履行怎么办? 苹果手机被黑客锁了怎么办 出租大面积厂房的中介费用怎么办 中山房子网签不了怎么办 物业服务太差该怎么办 取完公积金的卡怎么办 车卖了对方不过户怎么办 卫生间下水道堵了怎么办妙招 教练不让你练车怎么办 教练不让我练车怎么办 考三要练车教练不给练怎么办 科目二指纹打卡指纹不清楚怎么办 教练凶你的时候怎么办