首页 > 开发 > CSS > 正文

CSS学习笔记:任意大小图片是自适应居中

2024-07-11 09:01:42
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:平时笔记.

强制换行:word-warp:block-word;

任意大小图片是自适应居中:

css:

.wrapperBox{border:1px solid red; width:100px; height:100px; display:table-cell; font-size:0; text-align:center; vertical-align:middle; *position:relative;padding:0; overflow:hidden; }

.innerBox{text-align:center; vertical-align:middle; width:100px/9; *width:auto;font-size:0; *position:absolute;*top:50%;*left:50%;}

img{ max-height:100px; max-width:100px; *position:relative;*bottom:50%;*right:50%;margin:0 auto;}

html

<div class="wrapperBox">

<div class="innerBox">

<img src="images/test2.jpg" />

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表