首页 > 代码库 > 如何让未知尺寸的图片、单行文本、多行文本水平垂直居中？
如何让未知尺寸的图片、单行文本、多行文本水平垂直居中？
先看下效果图：
下面是CSS代码：
<style type="text/css"> /*让未知尺寸的图片、单行文本、多行文本水平垂直居中*/ .wrap { border: 1px solid #0094ff; width: 200px; height: 200px; /*下面是实现垂直居中的关键,没有之一*/ display: table-cell; text-align: center; vertical-align: middle; } .wrap .subwrap .content img { /*清除图片下方出现几像素的空白间隙*/ vertical-align: middle; } .wrap .subwrap .single { /*让单行文本在容器内垂直居中,只需设置文本的行高等于容器的高度即可*/ line-height: 200px; } /*IE 7 以下浏览器*/ .wrap { *display: block; *position: relative; *float:left; } .wrap .subwrap { *position: absolute; *top: 50%; *left: 50%; } .wrap .subwrap .content { *position: relative; *top: -50%; *left: -50%; } </style>
下面是HTML代码：
<h3>实现未知尺寸的图片、单行文本、多行文本水平垂直居中</h3> <div class="wrap"> <div class="subwrap "> <div class="content "> <img src="http://static.cnblogs.com/images/logo_small.gif" /> </div> </div> </div> <div class="wrap"> <div class="subwrap "> <div class="content single"> 单行文本 </div> </div> </div> <div class="wrap"> <div class="subwrap "> <div class="content "> 多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中 </div> </div> </div>
下面是完整的代码：
<!doctype html><html><head> <meta charset="utf-8"> <title>让未知尺寸的图片、单行文本、多行文本水平垂直居中</title> <style type="text/css"> /*让未知尺寸的图片、单行文本、多行文本水平垂直居中*/ .wrap { border: 1px solid #0094ff; width: 200px; height: 200px; /*下面是实现垂直居中的关键,没有之一*/ display: table-cell; text-align: center; vertical-align: middle; } .wrap .subwrap .content img { /*清除图片下方出现几像素的空白间隙*/ vertical-align: middle; } .wrap .subwrap .single { /*让单行文本在容器内垂直居中,只需设置文本的行高等于容器的高度即可*/ line-height: 200px; } /*IE 7 以下浏览器*/ .wrap { *display: block; *position: relative; *float:left; } .wrap .subwrap { *position: absolute; *top: 50%; *left: 50%; } .wrap .subwrap .content { *position: relative; *top: -50%; *left: -50%; } </style></head><body> <h3>实现未知尺寸的图片、单行文本、多行文本水平垂直居中</h3> <div class="wrap"> <div class="subwrap "> <div class="content "> <img src="http://static.cnblogs.com/images/logo_small.gif" /> </div> </div> </div> <div class="wrap"> <div class="subwrap "> <div class="content single"> 单行文本 </div> </div> </div> <div class="wrap"> <div class="subwrap "> <div class="content "> 多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中 </div> </div> </div></body></html>
如何让未知尺寸的图片、单行文本、多行文本水平垂直居中？
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。