博客列表 >3月23日作业

3月23日作业

程序员Z
程序员Z原创
2018年03月24日 13:41:10556浏览

1.png

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>CSS控制元素的对齐案例</title>
	<style type="text/css">
    .box1 {
    	width: 200px;
    	height: 200px;
    	background-color: pink;
    	text-align: center; /* 使行内元素在块元素中水平居中 */
    }
    .box1 a {
    	line-height: 200px;  /* 设置子元素与父元素等高,实现垂直居中*/
    }

    .box2  {
    	width: 200px;
    	height: 200px;
    	background-color:green;
    	text-align: center;    /* 设置水平居中 */
    	display: table-cell;  /*将当前块显示方式改为单元格*/
    	vertical-align: middle; /*设置上面单元格内的元素垂直居中 */
    }

    .box3 {
    	width: 200px;
    	height: 200px;
    	background-color:skyblue;
        display: table-cell;  /*将当前块显示方式改为单元格*/
    	vertical-align: middle; /*设置上面单元格内的子块居中 */
    }

     .box3 .child{
     	width: 100px;
     	height: 100px;
     	background-color: red;
     	margin: auto; /* 浏览器自动计算外边距,让子块水平居中 */	
     }

     .box4 {
     	width: 100px;
     	height: 100px;
     	background-color: blue;
     	text-align: center;         /*设置水平居中*/
     	display: table-cell;  /*将当前块显示方式改为单元格*/
    	vertical-align: bottom; /*设置单元格内的子块沿着底边 */
    }
     
     .box4 ul {
     	margin: 0;
     	padding: 0;
     }
   
     .box4 li {
     	list-style: none;
     	display: inline ;	
     }
	</style>
       
</head>
<body>
    
    <div class="box1">
         <a href="">我是一段文本</a>
    </div>
<hr>

    <div class="box2">
    <a href="">我还是一段文本</a>
    <span>www.baidu.com</span>
    </div>

<hr>

     <div class="box3"> 
     <div class="child"></div>
     </div>

<hr>

     <div class="box4">
      <ul>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      </ul>
     </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

01.jpg02.jpg03.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议