浦东新区建设机械网站,视频解析网站建设,廊坊百度推广优化,东莞寮步最新通知方案一#xff1a; 所有内容垂直水平居中 兼容性#xff1a;IE8。 条件#xff1a;内容宽度和高度可以未知#xff0c;可以是多行文字、图片、div。 描述#xff1a;使用table-cell vertical-align #xff0c; html代码见文末。 .centerDiv {width: 800px;height: 350p… 方案一 所有内容垂直水平居中 兼容性IE8。 条件内容宽度和高度可以未知可以是多行文字、图片、div。 描述使用table-cell vertical-align html代码见文末。 .centerDiv {width: 800px;height: 350px;background-color: #00b0f0;text-align: center;display: table-cell;vertical-align: middle;} 方案二 单行内容垂直水平居中 兼容性IE7 条件 文字内容必须为单行 描述 text-align: center水平居中 line-height 等于height 垂直居中 方案三 未知大小图片垂直水平居中 兼容性IE8 条件内容为图片文字不行。文字和图片组合时图片能居中文字不能。 描述父节点相对定位图片绝对定位 .centerDiv {width: 800px;height: 350px;background-color: #00b0f0;position: relative;}.centerDiv img {position: absolute;left: 0;top:0;right: 0;bottom: 0;margin: auto;} 方案四已知宽高度div垂直水平居中 兼容性I5 条件内容div高度宽度已知 描述 定位 负margin .centerDiv {width: 800px;height: 350px;background-color: #00b0f0;position: relative;}.centerDiv div {width: 500px;height: 300px;background-color: #00ee00;position: absolute;left: 50%; top: 50%;margin-left: -250px;margin-top: -150px;} 附 html测试代码 div classcenterDivphello this a p tag./p/divbrdiv classcenterDivimg srcimg/head.jpg/divbrdiv classcenterDivdivpqwe/ppqwe/ppqwe/p/div/div 转载于:https://www.cnblogs.com/codelovers/p/4399664.html
