未知大小的图片水平垂直居中以及连续字符串的自动换行

 知道图片大小时,要让图片水平垂直居中很简单,方法也有很多种。。。

今天跟大家分享的是 未知大小的图片水平垂直居中的方法... 宝宝不才 很多没法具体解释... 直接看代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<style>
.box{
	 display:table;
	 *display:inline;
	 *position:relative;
	 width:300px;
	 height:300px;
	 border: 2px solid #000;
	 background: #ccc;
	 float: left;
}
.box div{
	 display:table-cell;
	 *position:absolute;
	 *top:50%;
	 *left:50%;
	 vertical-align:middle;
	 text-align: center;
}

.box div img{
	 *position:relative;
	 *top:-50%;
	 *left:-50%;
	 vertical-align:middle;
}
.box div p{
	display: table-cell;
	 *position:relative;
	 *top:-50%;
	 *left:-50%;
	 *width: 300px;
	white-space:normal;
	word-break:break-all;

}
.outbox{
	margin: 0 auto;
	height: 304px;
	width: 920px;
}
</style>
</head>
<body>
<ul class="outbox">
 <li class="box">
  <div class="text">
  	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  </div>
 </li>
 <li class="box">
  <div><img src="2.jpg"/></div>
 </li>
 <li class="box">
  <div><img src="3.jpg"/></div>
 </li>
</ul>
</body>
</html> 

元素table类似 <table> 而元素table-cell 类似 <td> 和 <th>
可惜display:table;和display:table-cell; IE是不兼容的.. .  *是为了兼容ie下的情况...

代码中可以看到控制文字自动换行的是 word-break:break-all;

效果如图
未知大小的图片水平垂直居中以及连续字符串的自动换行_第1张图片

你可能感兴趣的:(自动换行,图片,垂直居中,水平居中,居中)