关于四块内容垂直水平居中的CSS笔试题

CSS笔试题(只用CSS实现,不用js):

:四块内容相对浏览器垂直居中、水平居中,每块中按从上到下顺序包括:副标题,正标题,图片(150 x 100),正文内容。要求4张图片水平对齐,图片上下的内容自适应分别向上下延伸。

自己写了一个解决方案,贴代码:

<style>
body{font-family:"Microsoft Yahei",simsun;font-size:14px;}
body,p,ul,li,dd,dt{margin:0;padding:0;}
img{border:0 none;}
ul,li,ol{list-style:none;}
.clear{clear:both;}
p{font:14px/1.5 simsun;padding:5px 0;text-align:left;}
.alignDemo{color:#333;width:900px;margin:0 auto;top:50%;left:50%;margin-top:-50px;margin-left:-450px;position:absolute;}
.alignDemo ul{}
.alignDemo ul li{width:150px;height:100px;float:left;margin-right:100px;position:relative;}
.alignDemo ul li.lr{margin-right:0;}
.alignDemo ul li .img img{width:150px;height:100px;}
.alignDemo ul li p{
width:150px;word-wrap:break-word;word-break:break-all;
/*div容器中内容将在边界换行,(word-wrap)英语句子中单词内不强制换行。(word-break)如果需要,词内换行。*/
}
.alignDemo ul li > div{position:absolute;}
.alignDemo ul li .tit{bottom:100px;}
.alignDemo ul li .con{top:100px;}
</style>

HTML代码:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="alignDemo">
	<ul>
		<li>
			<div class="tit">
				<p class="subtit">副标题副标题副标题副标题副标题</p>
				<p class="maintit">标题标题标题标题标题标题标题标题标题</p>
			</div>
			<div class="img"><img src="http://game.feiliu.com/uploadimage/youxibaodianwenzhang/image/20130715/20130715170526_61336.jpg" /></div>
			<div class="con">
				<p class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
			</div>
		</li>
		<li>
			<div class="tit">
				<p class="subtit">有多长有多长有多长有多长有多长有多长how many apples do you have? 123456789123456789123456789123456789123456789</p>
				<p class="maintit">有多长有多长有多长有多长有多长有多长有多长有多长有多长有多长</p>
			</div>
			<div class="img"><img src="http://game.feiliu.com/uploadimage/youxibaodianwenzhang/image/20130715/20130715170526_61336.jpg" /></div>
			<div class="con">
				<p class="content">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
			</div>
		</li>
		<li>
			<div class="tit">
				<p class="subtit">标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字</p>
				<p class="maintit">标题标题标题标题标题标题标题标题标题</p>
			</div>
			<div class="img"><img src="http://game.feiliu.com/uploadimage/youxibaodianwenzhang/image/20130715/20130715170526_61336.jpg" /></div>
			<div class="con">
				<p class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容增加内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容增加</p>
			</div>
		</li>
		<li class="lr">
			<div class="tit">
				<p class="subtit">副标题副标题副标题副标题副标题</p>
				<p class="maintit">标题标题标题标题标题标题标题标题标题</p>
			</div>
			<div class="img"><img src="http://game.feiliu.com/uploadimage/youxibaodianwenzhang/image/20130715/20130715170526_61336.jpg" /></div>
			<div class="con">
				<p class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
			</div>
		</li>
	</ul>
	<div class="clear"></div>
</div>

</body>
</html>

预览效果:



你可能感兴趣的:(垂直居中,自适应,水平居中,css居中)