使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px,长边为150px的红色十字架。
要求:
1.使用2个div完成
2.使用3个div完成
3.使用5个div完成
1、主要是关于浮动元素的居中问题
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <style> body{ padding:0; margin:0; } #vertical{ position:absolute; padding:0; margin-left:-25px; margin-top:-75px; background-color:red; width:50px; height:150px; float: left; left:50%; top:50%; } #across{ position:absolute; padding:0; margin-left:-75px; margin-top:-25px; background-color:red; left:50%; top:50%; width:150px; height:50px; float: left; } </style> </head> <body> <div id="vertical"></div> <div id="across"></div> </body> </html>