未知大小的圖片水平垂直居中以及連續字符串的自動換行

時間 2019-11-11

標籤未知大小圖片水平垂直居中以及連續字符串自動換行简体版

原文原文鏈接

知道圖片大小時，要讓圖片水平垂直居中很簡單，方法也有不少種。。。

今天跟你們分享的是未知大小的圖片水平垂直居中的方法... 寶寶不才不少無法具體解釋... 直接看代碼 html

<!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下的狀況...
spa

代碼中能夠看到控制文字自動換行的是 word-break:break-all; code

效果如圖

orm