博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【css】多行文字图片混排容器内垂直居中解决方案
阅读量:4557 次
发布时间:2019-06-08

本文共 513 字,大约阅读时间需要 1 分钟。

css:
 
.box-wrap{display:table;width:200px;height:200px;*position:relative;}/*最外边的容器,需固定宽高*/
.box-hack{display:table-cell;height:200px;vertical-align:middle;*position:absolute;*top:50%;}/*需要定义高度*/
.box-ctn{*position:relative;*top:-50%;}
 
html:
 
<div class="box-wrap">
<div class="box-hack">
<div class="box-ctn">
<img alt="图片" src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif">
<p>这是文字这是文字这是文字</p>
</div>
</div>
</div>
 
demo地址:
 
原文出自: 

转载于:https://www.cnblogs.com/zzuIvy/p/cssChuiZhiJuZhong.html

你可能感兴趣的文章
杂项-Java:EL表达式
查看>>
tarroni music
查看>>
unity 使用RotateAround的使用注意
查看>>
[SDOI2009]HH的项链
查看>>
CodeFirst模式,容易引发数据迁移问题(不建议使用)
查看>>
jquery的colorbox关闭并传递数据到父窗
查看>>
使用Nginx、Keepalived构建文艺负载均衡
查看>>
phpmyadmin 开放远程登录的权限
查看>>
linux安装gcc和gcc-c++
查看>>
qq登陆错误提示
查看>>
bzoj 1192: [HNOI2006]鬼谷子的钱袋 思维 + 二进制
查看>>
没写完,没调完,咕咕咕的代码
查看>>
Android Studio使用技巧:导出jar包
查看>>
Problem E. TeaTree - HDU - 6430 (树的启发式合并)
查看>>
Kafka序列化和反序列化与示例
查看>>
【Windows 8 Store App】学习一:获取设备信息
查看>>
实现Windows程序的数据更新
查看>>
win10下VS2010中文输入法切换为英文卡死
查看>>
retinex相关代码汇总
查看>>
Cortex-M3 异常返回值EXC_RETURN
查看>>