3月23 常用对齐方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>各种元素对齐方式</title>
<style type="text/css" media="screen">
.cases-1{
width:200px;
height:200px;
background-color:#899;
/* 让单行文本水平居中 */
text-align: center;
}
.cases-1 span{
/* 让行内元素与父元素行高相等实现垂直居中 */
line-height:200px;
}
.cases-2{
width:200px;
height:200px;
background-color:#899;
text-align: center; /* 水平居中 */
/* 将显示属性改成表格属性实现重直居中 */
display: table-cell;
/* 重直对齐的意思 middle 中间 */
vertical-align: middle;
}
.cases-2 ul{
padding:0px; /* ul 默认有40的paddin 清0才能水平居中 */
}
.cases-3{
width:200px;
height:200px;
background-color:#899;
/* 让div中的所有子块垂直居中 */
display: table-cell;
/* 重直对齐的意思 middle 中间 */
vertical-align: middle;
}
/* 让div中的子块水平居中 */
.cases-3 .info{
/* 必须设置一个宽才生效 */
width:100px;
/* height:100px; */
margin: auto; /* 水平居中 */
/* margin-left:auto; */ /* 自动挤到右上角 */
}
.cases-4{
width:300px;
height:200px;
background-color:#99CCCC;
text-align: right;
display: table-cell; /* 将显示属性改表格属性 */
vertical-align: bottom; /* 垂直对齐 bottom 向下的意思 */
}
.cases-4 ul {
list-style-type: none; /* 去掉ul的小圆点 */
/* padding:0px; */ /* 清除ul左边的padding */
padding-right:15px;
}
.cases-4 li{
display: inline; /* 设置li 显示一行 */
}
</style>
</head>
<body>
<div class="cases-1">
<span>单行文本居中</span>
</div>
<hr>
<div class="cases-2">
<span>多行文本居中</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<hr>
<div class="cases-3">
<div class="info">
我是元素中块元素<br />
</div>
</div>
<hr>
<h4>不定宽元素右下角轮番数</h4>
<div class="cases-4">
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄记录
