收藏
批改状态：合格
老师批语：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>对齐方式的学习</title>
<style type="text/css">
/* 单个行内元素的居中对齐 */
.no1 {
width: 300px;
height: 300px;
text-align: center;
background-color: #1CEB23;
}
.no1 h4 {
line-height: 300px;
}
/* 多个行内元素局中 */
.no2 {
width: 300px;
height: 300px;
background-color: #55EEB1;
text-align: center;/* 设置水平居中 */
display: table-cell;/*设置显示方式为表格单元格*/
vertical-align: middle;/*设置垂直居中*/
}
/* 子元素是块状元素 */
.no3 {
width: 300px;
height: 300px;
background-color: #E2C91D;
display: table-cell;/* 设置显示方式为表格单元格 */
vertical-align: middle;/* 设置垂直居中 */
}
.no3 .child {
width: 200px;
height: 200px;
margin: 0 auto;/* 设置水平居中 */
background-color: #F58C8C;
}
/* 子元素是不定宽的块元素 */
.no4 {
width: 300px;
height: 300px;
text-align: center;
display: table-cell;
vertical-align: top;
background-color: #0D51F0;
}
.no4 ul {
margin: 10px;
padding: 10px; /* line-height:300px;可以与父高保持一致，实现垂直居中 */
}
.no4 ul li {
display: inline;/* 确保水平排列 */
list-style: none;
}
.no4 ul li a:hover {
color: #E1E946;
font-size: 1.05em;
}
</style>
</head>
<body>
<div class="no1">
<h4>单个行内元素的居中对齐</h4>
</div>
<hr>
<div class="no2">
<span>第一行内元素居中<span><br>
<span>第二行内元素居中</span>
</div>
<hr>
<div class="no3">
<div class="child">
子元素是块状元素
</div>
</div>
<hr>
<div class="no4">
<ul>
<li><a href="">首页</a></li>
<li><a href="">简介</a></li>
<li><a href="">下载</a></li>
<li><a href="">友情链接</a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写作业：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
